Cart UI — Dispatch ও RTK Query একসাথে

"use client";

import { useAppDispatch } from "@/hooks/use-app-dispatch";
import { addItem } from "@/features/cart/cartSlice";

export function AddToCartButton({ product }: { product: Product }) {
  const dispatch = useAppDispatch();

  function handleAdd() {
    // RTK Query-র data নয় — slice action dispatch
    dispatch(addItem({ productId: product.id, qty: 1 }));
  }

  return (
    <Button
      onClick={handleAdd}
      disabled={product.stock === 0}
    >
      {product.stock === 0 ? "স্টক শেষ" : "কার্টে যোগ করুন"}
    </Button>
  );
}

export function CartDrawer() {
  const items = useAppSelector(selectCartItems);
  const { data: products } = useGetProductsQuery();

  const total = items.reduce((sum, item) => {
    const price = products?.find((p) => p.id === item.productId)?.price ?? 0;
    return sum + price * item.qty;
  }, 0);

  return (
    <Sheet>
      <SheetContent className="w-80">
        <SheetHeader>
          <SheetTitle>উত্পাদিত পণ্যের কার্ট</SheetTitle>
        </SheetHeader>

        {items.length === 0 ? (
          <p className="py-10 text-center text-muted-foreground">
            কার্ট খালি
          </p>
        ) : (
          <>
            <ul className="space-y-3">
              {items.map((item) => {
                const product = products?.find(
                  (p) => p.id === item.productId,
                );
                return (
                  <li key={item.productId}>
                    <div className="flex items-center justify-between">
                      <span>{product?.name ?? "…"}</span>
                      <span>{product?.price ?? 0} ৳</span>
                    </div>
                    <div className="flex items-center gap-2">
                      <Button size="sm" variant="ghost"
                        onClick={() => dispatch(decrement(item.productId))}>
                        −
                      </Button>
                      <span>{item.qty}</span>
                      <Button size="sm" variant="ghost"
                        onClick={() => dispatch(increment(item.productId))}>
                        +
                      </Button>
                    </div>
                  </li>
                );
              })}
            </ul>

            <Separator />
            <div className="flex justify-between font-semibold">
              <span>সর্বমোট</span>
              <span>{total} ৳</span>
            </div>
            <CheckoutButton />
          </>
        )}
      </SheetContent>
    </Sheet>
  );
}