"use client";

import { useState } from "react";

import type { Product } from "@/lib/data";
import { addToCart, openCartSheet } from "@/lib/cart";
import { Button } from "@/components/ui/button";

type AddToCartButtonProps = {
  product: Product;
  imageOverride?: string;
  color?: string;
  size?: string;
  className?: string;
  children?: React.ReactNode;
};

export function AddToCartButton({ product, imageOverride, color, size, className, children }: AddToCartButtonProps) {
  const [added, setAdded] = useState(false);

  const handleAdd = () => {
    addToCart(product, { imageOverride, color, size });
    setAdded(true);
    window.setTimeout(() => setAdded(false), 900);
    openCartSheet();
  };

  return (
    <Button onClick={handleAdd} className={className}>
      {added ? "Added" : children || "Add to Cart"}
    </Button>
  );
}