{"path":"src/components/admin/AdminProductCard.tsx","size":3983,"locked":false,"binary":false,"truncated":false,"content":"\"use client\";\n\nimport { useState } from \"react\";\nimport { ChevronLeft, ChevronRight, Plus, Pencil, Trash2 } from \"lucide-react\";\n\ninterface Props {\n  product: any;\n  onEdit: (product: any) => void;\n  onDelete: (id: string) => void;\n}\n\nexport function AdminProductCard({ product, onEdit, onDelete }: Props) {\n  // Build image list from the `images` array (fallback to primary image, else empty)\n  const rawImages = Array.isArray(product?.images) ? product.images : [];\n  const cleanImages = rawImages.filter((u: any) => typeof u === \"string\" && u.trim().length > 0);\n  const allImages: string[] = cleanImages.length > 0\n    ? cleanImages\n    : product?.image\n    ? [product.image]\n    : [];\n\n  const [currentImageIndex, setCurrentImageIndex] = useState(0);\n\n  const prevImage = (e: React.MouseEvent) => {\n    e.preventDefault();\n    if (allImages.length > 1) {\n      setCurrentImageIndex((prev) => (prev - 1 + allImages.length) % allImages.length);\n    }\n  };\n\n  const nextImage = (e: React.MouseEvent) => {\n    e.preventDefault();\n    if (allImages.length > 1) {\n      setCurrentImageIndex((prev) => (prev + 1) % allImages.length);\n    }\n  };\n\n  return (\n    <div className=\"bg-white border border-neutral-100 p-3 rounded-sm flex flex-col justify-between group\">\n      <div>\n        <div className=\"relative aspect-square w-full bg-[#f4f4f4] flex items-center justify-center text-neutral-300 overflow-hidden rounded-sm\">\n          {allImages.length > 0 ? (\n            <>\n              <img\n                src={allImages[currentImageIndex]}\n                alt={product.name}\n                className=\"object-cover w-full h-full\"\n              />\n              {allImages.length > 1 && (\n                <>\n                  <button\n                    onClick={prevImage}\n                    className=\"absolute left-2 top-1/2 -translate-y-1/2 z-10 bg-white/80 rounded-full p-1 shadow hover:bg-white transition\"\n                  >\n                    <ChevronLeft className=\"w-4 h-4\" />\n                  </button>\n                  <button\n                    onClick={nextImage}\n                    className=\"absolute right-2 top-1/2 -translate-y-1/2 z-10 bg-white/80 rounded-full p-1 shadow hover:bg-white transition\"\n                  >\n                    <ChevronRight className=\"w-4 h-4\" />\n                  </button>\n                  <div className=\"absolute bottom-2 left-1/2 -translate-x-1/2 flex gap-1.5 z-10\">\n                    {allImages.map((_, idx) => (\n                      <span\n                        key={idx}\n                        className={`block w-2 h-2 rounded-full ${\n                          idx === currentImageIndex ? \"bg-black\" : \"bg-white/70\"\n                        }`}\n                      />\n                    ))}\n                  </div>\n                </>\n              )}\n            </>\n          ) : (\n            <Plus className=\"w-10 h-10 stroke-[0.75]\" />\n          )}\n        </div>\n\n        <div className=\"mt-4 space-y-1\">\n          <div className=\"flex justify-between items-baseline gap-2\">\n            <h4 className=\"font-serif text-[13px] font-medium tracking-wider text-neutral-900 line-clamp-1\">\n              {product.name}\n            </h4>\n            <span className=\"text-[12px] font-medium text-neutral-600\">${product.price}</span>\n          </div>\n          <p className=\"text-[10px] tracking-wide text-neutral-400 font-light uppercase\">\n            {product.description}\n          </p>\n        </div>\n      </div>\n      <div className=\"mt-4 pt-3 border-t border-neutral-100 flex items-center justify-between text-[11px] tracking-wider uppercase\">\n        <button onClick={() => onEdit(product)} className=\"text-neutral-400 hover:text-black transition-colors font-medium\">\n          Edit\n        </button>\n        <button onClick={() => onDelete(product.id)} className=\"text-neutral-400 hover:text-red-600 transition-colors font-medium\">\n          Delete\n        </button>\n      </div>\n    </div>\n  );\n    }\n"}