{
  "name": "cart-01-block",
  "type": "registry:block",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "https://ui.stackzero.co/r/quantity-input-basic.json",
    "https://ui.stackzero.co/r/price-format-basic.json"
  ],
  "files": [
    {
      "type": "registry:block",
      "content": "\"use client\";\n\nimport PriceFormat from \"@/components/commerce-ui/price-format-basic\";\nimport QuantityInputBasic from \"@/components/commerce-ui/quantity-input-basic\";\nimport { Button } from \"@/components/ui/button\";\nimport { Loader2, ShoppingCart } from \"lucide-react\";\n\n// Default logo placeholder\nconst DEFAULT_LOGO =\n  \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/logo-placeholder.png\";\n\n// Product item interface\ninterface CartProduct {\n  id: string;\n  name: string;\n  price: number;\n  quantity: number;\n  imageUrl: string;\n}\n\n// Cart checkout payload interface\ninterface CartCheckoutPayload {\n  products: CartProduct[];\n  subtotal: number;\n  shippingCost: number;\n  vatAmount: number;\n  vatRate: number;\n  totalAmount: number;\n  currencyPrefix: string;\n}\n\n// Cart component props\ninterface CartProps {\n  storeName?: string;\n  logoUrl?: string;\n  products?: CartProduct[];\n  subtotal?: number;\n  shippingCost?: number;\n  vatRate?: number;\n  currencyPrefix?: string;\n  isLoading?: boolean;\n  errorMessage?: string;\n  onCheckout?: (payload: CartCheckoutPayload) => void;\n  onContinueShopping?: (payload: CartCheckoutPayload) => void;\n  onUpdateQuantity?: (productId: string, newQuantity: number) => void;\n  onRemoveProduct?: (productId: string) => void;\n}\n\n// Default products for demo purposes\nconst DEFAULT_PRODUCTS: CartProduct[] = [\n  {\n    id: \"prod-1\",\n    imageUrl:\n      \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/headphone-1.jpg\",\n    name: \"Wireless Headphones\",\n    price: 98.96,\n    quantity: 1,\n  },\n  {\n    id: \"prod-2\",\n    imageUrl:\n      \"https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/watch-1.jpg\",\n    name: \"Smart Watch\",\n    price: 129.99,\n    quantity: 2,\n  },\n];\n\nfunction Cart_01({\n  currencyPrefix = \"$\",\n  errorMessage = \"\",\n  isLoading = false,\n  logoUrl = DEFAULT_LOGO,\n  onCheckout = () => {},\n  onContinueShopping = () => {},\n  onRemoveProduct = () => {},\n  onUpdateQuantity = () => {},\n  products = DEFAULT_PRODUCTS,\n  shippingCost = 15.99,\n  storeName = \"TechGadgets\",\n  subtotal = 358.94, // This would typically be calculated from products\n  vatRate = 0.2, // 20% VAT\n}: CartProps = {}) {\n  // Calculate VAT and total\n  const vatAmount = subtotal * vatRate;\n  const totalAmount = subtotal + shippingCost + vatAmount;\n\n  const isCartEmpty = !products || products.length === 0;\n\n  // Create the checkout payload\n  const checkoutPayload: CartCheckoutPayload = {\n    currencyPrefix,\n    products: [...(products || [])],\n    shippingCost,\n    subtotal,\n    totalAmount,\n    vatAmount,\n    vatRate,\n  };\n\n  return (\n    <div className=\"w-full max-w-4xl rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900\">\n      {/* Store Header */}\n      <div className=\"flex items-center space-x-4 rounded-t-xl bg-gradient-to-r from-blue-600 to-violet-600 p-6 text-white\">\n        <div className=\"h-12 w-12 overflow-hidden rounded-full bg-white p-1\">\n          <img\n            src={logoUrl}\n            alt={`${storeName} logo`}\n            width={48}\n            height={48}\n            className=\"h-full w-full object-contain\"\n          />\n        </div>\n        <h1 className=\"text-2xl font-bold\">{storeName}</h1>\n      </div>\n\n      {/* Error Message Display */}\n      {errorMessage && (\n        <div className=\"m-6 rounded-md bg-red-50 p-4 text-red-600 dark:bg-red-900/20 dark:text-red-400\">\n          <p className=\"font-medium\">{errorMessage}</p>\n        </div>\n      )}\n\n      {/* Loading State */}\n      {isLoading && (\n        <div className=\"flex flex-col items-center justify-center p-12 text-center\">\n          <Loader2 className=\"h-10 w-10 animate-spin text-blue-600 dark:text-blue-400\" />\n          <p className=\"mt-4 text-gray-700 dark:text-gray-300\">\n            Loading your cart...\n          </p>\n        </div>\n      )}\n\n      {/* Cart Items or Empty Cart Message */}\n      {!isLoading &&\n        !errorMessage &&\n        (isCartEmpty ? (\n          <div className=\"flex flex-col items-center justify-center p-12 text-center\">\n            <div className=\"mb-4 rounded-full bg-gray-100 p-4 dark:bg-gray-800\">\n              <ShoppingCart\n                size={48}\n                className=\"text-gray-400 dark:text-gray-500\"\n              />\n            </div>\n            <h2 className=\"mb-2 text-xl font-semibold text-gray-900 dark:text-gray-100\">\n              Your shopping cart is empty\n            </h2>\n            <p className=\"mb-6 text-gray-600 dark:text-gray-400\">\n              Looks like you haven&apos;t added any items to your cart yet.\n            </p>\n            <Button\n              onClick={() => onContinueShopping(checkoutPayload)}\n              className=\"bg-gradient-to-r from-blue-600 to-violet-600 text-white transition-all hover:from-blue-700 hover:to-violet-700\"\n            >\n              Start Shopping\n            </Button>\n          </div>\n        ) : (\n          <div className=\"divide-y divide-gray-200 dark:divide-gray-800\">\n            {products.map((product) => (\n              <div\n                key={product.id}\n                className=\"grid grid-cols-[80px_1fr_auto_auto_auto] items-center gap-4 p-6\"\n              >\n                <div className=\"h-20 w-20 flex-shrink-0 overflow-hidden rounded-md bg-gray-100 dark:bg-gray-800\">\n                  <img\n                    src={product.imageUrl}\n                    alt={product.name}\n                    className=\"h-full w-full object-contain\"\n                    width={80}\n                    height={80}\n                  />\n                </div>\n\n                <div className=\"max-w-[200px] overflow-hidden\">\n                  <h3 className=\"overflow-hidden text-lg font-medium text-ellipsis whitespace-nowrap text-gray-900 dark:text-gray-100\">\n                    {product.name}\n                  </h3>\n                  <PriceFormat\n                    prefix={currencyPrefix}\n                    value={product.price}\n                    className=\"mt-1 text-gray-600 dark:text-gray-400\"\n                  />\n                </div>\n\n                <div className=\"flex items-center\">\n                  <QuantityInputBasic\n                    quantity={product.quantity}\n                    min={1}\n                    onChange={(newQuantity) =>\n                      onUpdateQuantity(product.id, newQuantity)\n                    }\n                    className=\"border-gray-300 dark:border-gray-700\"\n                  />\n                </div>\n\n                <div className=\"w-24 text-right\">\n                  <PriceFormat\n                    prefix={currencyPrefix}\n                    value={product.price * product.quantity}\n                    className=\"font-medium text-gray-900 dark:text-gray-100\"\n                  />\n                </div>\n\n                <button\n                  onClick={() => onRemoveProduct(product.id)}\n                  className=\"justify-self-end text-gray-400 hover:text-gray-600 dark:hover:text-gray-300\"\n                  aria-label=\"Remove item\"\n                >\n                  <svg\n                    className=\"h-5 w-5\"\n                    fill=\"currentColor\"\n                    viewBox=\"0 0 20 20\"\n                  >\n                    <path\n                      fillRule=\"evenodd\"\n                      d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\n                      clipRule=\"evenodd\"\n                    />\n                  </svg>\n                </button>\n              </div>\n            ))}\n          </div>\n        ))}\n\n      {/* Summary Section - Only show if cart has items and not loading/error */}\n      {!isLoading && !errorMessage && !isCartEmpty && (\n        <div className=\"bg-gray-50 p-6 dark:bg-gray-800/50\">\n          <h2 className=\"mb-4 text-xl font-bold text-gray-900 dark:text-gray-100\">\n            Order Summary\n          </h2>\n\n          <div className=\"space-y-3\">\n            <div className=\"flex justify-between text-gray-600 dark:text-gray-400\">\n              <span>Subtotal</span>\n              <PriceFormat prefix={currencyPrefix} value={subtotal} />\n            </div>\n\n            <div className=\"flex justify-between text-gray-600 dark:text-gray-400\">\n              <span>Shipping</span>\n              <PriceFormat prefix={currencyPrefix} value={shippingCost} />\n            </div>\n\n            <div className=\"flex justify-between text-gray-600 dark:text-gray-400\">\n              <span>VAT ({(vatRate * 100).toFixed(0)}%)</span>\n              <PriceFormat prefix={currencyPrefix} value={vatAmount} />\n            </div>\n\n            <div className=\"border-t border-gray-200 pt-3 dark:border-gray-700\">\n              <div className=\"flex justify-between font-bold text-gray-900 dark:text-gray-100\">\n                <span>Total</span>\n                <PriceFormat\n                  prefix={currencyPrefix}\n                  value={totalAmount}\n                  className=\"text-xl text-blue-600 dark:text-blue-400\"\n                />\n              </div>\n            </div>\n          </div>\n\n          <div className=\"mt-6 space-y-3\">\n            <Button\n              onClick={() => onCheckout(checkoutPayload)}\n              className=\"w-full bg-gradient-to-r from-blue-600 to-violet-600 text-white transition-all hover:from-blue-700 hover:to-violet-700\"\n              disabled={isLoading}\n            >\n              Proceed to Checkout\n            </Button>\n\n            <Button\n              variant=\"outline\"\n              onClick={() => onContinueShopping(checkoutPayload)}\n              className=\"w-full border-gray-300 bg-white text-gray-800 transition-all hover:border-blue-500 hover:bg-blue-50 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:hover:border-blue-500 dark:hover:bg-gray-700\"\n              disabled={isLoading}\n            >\n              Continue Shopping\n            </Button>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport default Cart_01;\nexport type { CartCheckoutPayload, CartProduct, CartProps };\n",
      "path": "/components/commerce-ui/blocks/carts/cart-01.tsx",
      "target": "components/commerce-ui/cart-01.tsx"
    }
  ]
}