"use client";

import { useState } from "react";
import { addToCart, type CartItem } from "@/lib/cart";
import { ShoppingCart, Check } from "lucide-react";

interface Props {
  item: Omit<CartItem, "quantity">;
  className?: string;
}

export function AddToCartButton({ item, className }: Props) {
  const [added, setAdded] = useState(false);

  function handle() {
    addToCart({ ...item, quantity: 1 });
    setAdded(true);
    setTimeout(() => setAdded(false), 1500);
  }

  return (
    <button
      type="button"
      onClick={handle}
      className={className ?? "flex items-center gap-1.5 rounded-lg border border-primary-300 bg-primary-50 px-3 py-1.5 text-sm font-medium text-primary-700 hover:bg-primary-100 transition-colors"}
    >
      {added ? <Check className="h-3.5 w-3.5" /> : <ShoppingCart className="h-3.5 w-3.5" />}
      {added ? "Added" : "Add to Cart"}
    </button>
  );
}