'use client';

import { Button } from "@/components/ui/Button";
import { useAppDispatch } from "@/lib/redux/hooks";
import { addToBox } from "@/lib/redux/slices/boxSlice";
import { useState } from "react";

interface AddToBoxButtonProps {
  productId: string;
  name: string;
  price: number;
  image: string;
  variantId?: string;
  color?: string;
  className?: string;
}

export function AddToBoxButton({
  productId,
  name,
  price,
  image,
  variantId,
  color,
  className = ""
}: AddToBoxButtonProps) {
  const dispatch = useAppDispatch();
  const [isLoading, setIsLoading] = useState(false);

  const handleAddToBox = () => {
    if (isLoading) return;
    
    setIsLoading(true);
    
    dispatch(addToBox({
      id: productId,
      name,
      price,
      image,
      quantity: 1,
      variantId,
      color
    }));
    
    // Add a small delay to simulate adding to cart for better UX
    setTimeout(() => {
      setIsLoading(false);
    }, 500);
  };

  return (
    <Button
      onClick={handleAddToBox}
      disabled={isLoading}
      variant="primary"
      size="lg"
      className={`w-full ${className}`}
    >
      {isLoading ? "Dodaje se..." : "Dodaj u box"}
    </Button>
  );
}