"use client";

import React from 'react';
import { ShoppingCart } from 'lucide-react';
import { useCartStore } from '@/store/cartStore';

interface AddToCartButtonProps {
  product: {
    id: string;
    name: string;
    price: number;
    image_url: string;
  };
}

export default function AddToCartButton({ product }: AddToCartButtonProps) {
  const { addItem, openCart } = useCartStore();

  return (
    <button 
      onClick={(e) => {
        e.preventDefault(); 
        addItem({
          id: product.id,
          name: product.name,
          price: product.price,
          quantity: 1,
          image: product.image_url
        });
        openCart(); 
      }}
      className="bg-neutral-900 text-white p-2.5 rounded-full hover:bg-yellow-500 hover:text-neutral-900 transition-colors z-10 relative shadow-md"
      aria-label={`Add ${product.name} to cart`}
    >
      <ShoppingCart className="w-5 h-5" />
    </button>
  );
}