"use client";
import { useEffect,useState } from "react";
import Link from "next/link";
type Item={slug:string;name:string;price:number;image:string;qty:number};
export default function CartClient(){const [items,setItems]=useState<Item[]>([]);const [ready,setReady]=useState(false);
useEffect(()=>{setItems(JSON.parse(localStorage.getItem("cc-cart")||"[]"));setReady(true)},[]);
function save(next:Item[]){setItems(next);localStorage.setItem("cc-cart",JSON.stringify(next))}
const total=items.reduce((s,i)=>s+i.price*i.qty,0);
if(!ready)return <div className="empty">Loading cart…</div>;
return <section className="section">{!items.length?<div className="empty"><h2>Your cart is waiting</h2><p className="sub">Explore the collection and add something personal.</p><Link className="btn" href="/shop">SHOP PRODUCTS</Link></div>:<><div>{items.map(i=><div className="cart-row" key={i.slug}><img src={i.image} alt={i.name}/><div><strong>{i.name}</strong><p className="sub">₹{i.price.toLocaleString("en-IN")}</p><button className="btn outline" onClick={()=>save(items.filter(x=>x.slug!==i.slug))}>Remove</button></div><div><input aria-label={`Quantity for ${i.name}`} type="number" min="1" value={i.qty} style={{width:60,padding:8}} onChange={e=>save(items.map(x=>x.slug===i.slug?{...x,qty:Math.max(1,Number(e.target.value)||1)}:x))}/></div></div>)}</div><div style={{textAlign:"right",padding:"28px 0"}}><h2>Total: ₹{total.toLocaleString("en-IN")}</h2><p className="sub">Shipping and applicable taxes are calculated during checkout.</p><Link className="btn" href="/checkout">PROCEED TO CHECKOUT</Link></div></>}</section>}