reui-blocks/blocks/shopping-cart18.tsx

"use client";

import { Minus, Plus, ShoppingBag, Trash2, X } from "lucide-react";
import { useState } from "react";

import { AspectRatio } from "@/components/ui/aspect-ratio";
import { Button } from "@/components/ui/button";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

interface CartItem {
  id: string;
  name: string;
  image: string;
  price: number;
  quantity: number;
  variant?: string;
}

const DEFAULT_ITEMS: CartItem[] = [
  {
    id: "1",
    name: "تی‌شرت پنبه‌ای کلاسیک",
    image:
      "/block-media/shadcnblocks/block/ecommerce/clothes/minimalist-tank-top-flatlay.png",
    price: 29.99,
    quantity: 2,
    variant: "سفید / M",
  },
  {
    id: "2",
    name: "کیف چرمی کراس‌بادی",
    image:
      "/block-media/shadcnblocks/block/ecommerce/clothes/maroon-leather-handbag.png",
    price: 89.0,
    quantity: 1,
    variant: "زرشکی",
  },
];

interface ShoppingCart18Props {
  items?: CartItem[];
  className?: string;
}

const ShoppingCart18 = ({
  items: initialItems = DEFAULT_ITEMS,
  className,
}: ShoppingCart18Props) => {
  const [items, setItems] = useState(initialItems);
  const [isOpen, setIsOpen] = useState(false);

  const updateQuantity = (id: string, delta: number) => {
    setItems((prev) =>
      prev
        .map((item) =>
          item.id === id
            ? { ...item, quantity: Math.max(0, item.quantity + delta) }
            : item,
        )
        .filter((item) => item.quantity > 0),
    );
  };

  const removeItem = (id: string) => {
    setItems((prev) => prev.filter((item) => item.id !== id));
  };

  const formatPrice = (price: number) => {
    return new Intl.NumberFormat("fa-IR", {
      style: "currency",
      currency: "IRR",
    }).format(price);
  };

  const subtotal = items.reduce(
    (sum, item) => sum + item.price * item.quantity,
    0,
  );
  const itemCount = items.reduce((sum, item) => sum + item.quantity, 0);

  return (
    <div className={cn("inline-flex", className)}>
      <Popover open={isOpen} onOpenChange={setIsOpen}>
        <PopoverTrigger asChild>
          <Button
            variant="outline"
            size="icon"
            className="relative"
            aria-label="سبد خرید"
          >
            <ShoppingBag className="size-5" />
            {itemCount > 0 && (
              <span className="absolute -top-1 -end-1 flex size-5 items-center justify-center rounded-full bg-primary text-xs font-medium text-primary-foreground">
                {itemCount.toLocaleString("fa-IR")}
              </span>
            )}
          </Button>
        </PopoverTrigger>
        <PopoverContent className="w-80 p-0" align="end">
          <div className="flex items-center justify-between border-b p-4">
            <h3 className="font-semibold">
              سبد خرید ({itemCount.toLocaleString("fa-IR")})
            </h3>
            <Button
              variant="ghost"
              size="icon"
              className="size-8"
              onClick={() => setIsOpen(false)}
              aria-label="بستن"
            >
              <X className="size-4" />
            </Button>
          </div>

          {items.length > 0 ? (
            <>
              <div className="max-h-80 overflow-y-auto p-4">
                <div className="space-y-4">
                  {items.map((item) => (
                    <div key={item.id} className="flex gap-3">
                      <div className="size-16 shrink-0 overflow-hidden rounded-md bg-muted">
                        <AspectRatio ratio={1}>
                          <img
                            src={item.image}
                            alt={item.name}
                            className="size-full object-cover"
                          />
                        </AspectRatio>
                      </div>
                      <div className="flex min-w-0 flex-1 flex-col">
                        <h4 className="truncate text-sm font-medium">
                          {item.name}
                        </h4>
                        {item.variant && (
                          <p className="text-xs text-muted-foreground">
                            {item.variant}
                          </p>
                        )}
                        <p className="text-sm font-semibold">
                          {formatPrice(item.price)}
                        </p>
                        <div className="mt-auto flex items-center justify-between">
                          <div className="flex items-center gap-1">
                            <Button
                              variant="outline"
                              size="icon"
                              className="size-6"
                              onClick={() => updateQuantity(item.id, -1)}
                              aria-label={`کاهش تعداد ${item.name}`}
                            >
                              <Minus className="size-3" />
                            </Button>
                            <span className="w-6 text-center text-sm">
                              {item.quantity.toLocaleString("fa-IR")}
                            </span>
                            <Button
                              variant="outline"
                              size="icon"
                              className="size-6"
                              onClick={() => updateQuantity(item.id, 1)}
                              aria-label={`افزایش تعداد ${item.name}`}
                            >
                              <Plus className="size-3" />
                            </Button>
                          </div>
                          <Button
                            variant="ghost"
                            size="icon"
                            className="size-6 text-muted-foreground hover:text-destructive"
                            onClick={() => removeItem(item.id)}
                            aria-label={`حذف ${item.name} از سبد`}
                          >
                            <Trash2 className="size-3" />
                          </Button>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              <Separator />

              <div className="p-4">
                <div className="mb-4 flex items-center justify-between">
                  <span className="text-sm text-muted-foreground">جمع جزء</span>
                  <span className="text-lg font-semibold">
                    {formatPrice(subtotal)}
                  </span>
                </div>
                <div className="flex flex-col gap-2">
                  <Button className="w-full">ادامه خرید</Button>
                  <Button
                    variant="outline"
                    className="w-full"
                    onClick={() => setIsOpen(false)}
                  >
                    مشاهده سبد خرید
                  </Button>
                </div>
              </div>
            </>
          ) : (
            <div className="p-8 text-center">
              <ShoppingBag className="mx-auto mb-3 size-10 text-muted-foreground" />
              <p className="text-sm text-muted-foreground">
                سبد خرید شما خالی است
              </p>
              <Button
                variant="outline"
                className="mt-4"
                onClick={() => setIsOpen(false)}
              >
                مشاهده محصولات
              </Button>
            </div>
          )}
        </PopoverContent>
      </Popover>
    </div>
  );
};

export { ShoppingCart18 };