"use client";

import { useQuoteStore, type QuoteItem } from "@/lib/quote-store";
import { ShoppingCart, Check } from "lucide-react";
import { useState } from "react";

interface AddToQuoteButtonProps {
  product: {
    id: number;
    name: string;
    image: string;
  };
  className?: string;
}

export default function AddToQuoteButton({
  product,
  className = "",
}: AddToQuoteButtonProps) {
  // const [quantity, setQuantity] = useState(1);
  const [added, setAdded] = useState(false);
  const addItem = useQuoteStore((state) => state.addItem);

  const handleAddToQuote = () => {
    const quoteItem: QuoteItem = {
      id: product.id,
      title: product.name,
      image: product.image,
      price: 0,
      quantity: 1,
    };

    addItem(quoteItem);
    setAdded(true);

    setTimeout(() => {
      setAdded(false);
    }, 2000);
  };

  return (
    <div className={`flex items-center ${className}`}>
      <div className="flex items-center border border-gray-200 rounded-l-lg mr-px">
        {/* <button
          onClick={() => setQuantity(Math.max(1, quantity - 1))}
          className="px-3 py-2 text-gray-600 hover:text-red-600 transition-colors"
          aria-label="Decrease quantity"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            className="h-4 w-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M20 12H4"
            />
          </svg>
        </button> */}
        {/* <input
          type="number"
          value={quantity}
          onChange={(e) =>
            setQuantity(Math.max(1, Number.parseInt(e.target.value) || 1))
          }
          min="1"
          className="w-12 text-center py-2 border-x border-gray-200 focus:outline-none"
        /> */}
        {/* <button
          onClick={() => setQuantity(quantity + 1)}
          className="px-3 py-2 text-gray-600 hover:text-red-600 transition-colors"
          aria-label="Increase quantity"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            className="h-4 w-4"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M12 4v16m8-8H4"
            />
          </svg>
        </button> */}
      </div>

      <button
        onClick={handleAddToQuote}
        disabled={added}
        className={`flex items-center justify-center px-4 py-2 rounded-lg transition-colors ${
          added
            ? "bg-green-600 text-white"
            : "bg-red-600 hover:bg-red-700 text-white"
        }`}
      >
        {added ? (
          <>
            <Check className="w-4 h-4 mr-2" />
            Added
          </>
        ) : (
          <>
            <ShoppingCart className="w-4 h-4 mr-2" />
            Add to Quote
          </>
        )}
      </button>
    </div>
  );
}