'use client';

import { useState } from 'react';
import { useCart } from '@/lib/cart-context';

export function AddToCartButton({
  productId,
  slug,
  name,
  price,
  image,
  quantity = 1,
  className,
}: {
  productId: number;
  slug: string;
  name: string;
  price: number;
  image: string;
  quantity?: number;
  className?: string;
}) {
  const { addItem } = useCart();
  const [added, setAdded] = useState(false);

  function handleClick() {
    addItem({ productId, slug, name, price, image }, quantity);
    setAdded(true);
    setTimeout(() => setAdded(false), 1500);
  }

  return (
    <button type="button" onClick={handleClick} className={className}>
      {added ? 'Added ✓' : 'Add to Cart'}
    </button>
  );
}