"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { ShoppingCart, Plus, Minus } from "lucide-react"
import { useCart } from "@/lib/cart"
import type { Product } from "@/lib/products"

interface AddToCartButtonProps {
  product: Product
}

export default function AddToCartButton({ product }: AddToCartButtonProps) {
  const [quantity, setQuantity] = useState(1)
  const { addItem } = useCart()

  const handleAddToCart = () => {
    addItem(product, quantity)
  }

  return (
    <div className="space-y-4">
      <div className="flex items-center gap-4">
        <span className="text-[var(--dark-color)] font-medium">الكمية:</span>
        <div className="flex items-center gap-2">
          <Button
            size="icon"
            variant="outline"
            onClick={() => setQuantity(Math.max(1, quantity - 1))}
            disabled={quantity <= 1}
          >
            <Minus className="w-4 h-4" />
          </Button>

          <span className="w-12 text-center font-medium text-[var(--dark-color)]">{quantity}</span>

          <Button
            size="icon"
            variant="outline"
            onClick={() => setQuantity(Math.min(product.stockQuantity, quantity + 1))}
            disabled={quantity >= product.stockQuantity}
          >
            <Plus className="w-4 h-4" />
          </Button>
        </div>
      </div>

      <Button
        onClick={handleAddToCart}
        disabled={!product.inStock}
        size="lg"
        className="w-full bg-[var(--main-color)] hover:bg-[var(--main-color)]/90 text-[var(--dark-color)] font-medium"
      >
        <ShoppingCart className="w-5 h-5 ml-2" />
        إضافة إلى السلة ({(product.price * quantity).toFixed(2)} جنيه)
      </Button>
    </div>
  )
}