'use client';

import { useState } from 'react';
import { useCart } from './CartProvider';

export function AddToCartButton({
  productId,
  slug,
  name,
  price,
  variants,
}: {
  productId: string;
  slug: string;
  name: string;
  price: number;
  variants?: { name: string; priceDelta: number }[];
}) {
  const { add } = useCart();
  const [variant, setVariant] = useState(variants?.[0]?.name);
  const [added, setAdded] = useState(false);
  const delta = variants?.find((v) => v.name === variant)?.priceDelta ?? 0;

  return (
    <div className="space-y-3">
      {variants && variants.length > 0 && (
        <div>
          <label className="label" htmlFor="variant">
            Option
          </label>
          <select id="variant" className="input" value={variant} onChange={(e) => setVariant(e.target.value)}>
            {variants.map((v) => (
              <option key={v.name} value={v.name}>
                {v.name}
                {v.priceDelta ? ` (+$${(v.priceDelta / 100).toFixed(2)})` : ''}
              </option>
            ))}
          </select>
        </div>
      )}
      <button
        type="button"
        className="btn-primary w-full"
        onClick={() => {
          add({ productId, slug, name, variant, price: price + delta });
          setAdded(true);
          setTimeout(() => setAdded(false), 1500);
        }}
      >
        {added ? 'Added ✓' : 'Add to cart'}
      </button>
    </div>
  );
}