"use client"
import React from 'react'
import Image from 'next/image';
import { useCart } from '@/context/CartContex';
import { ProductM } from '@shared/interfaces'

interface BaskentButtonProps {
  product: ProductM
  label: string; // Buton üzerinde gösterilecek metin,
  icon?: string
}

const BasketButton: React.FC<BaskentButtonProps> = ({ product, label, icon }) => {

  const { addToCart, removeFromCart, isInCart } = useCart();

  const ekle = () => {
    // addToCart({id,  title, brand, category, image, description:content, quantity: 1})
    addToCart(
      {
        id: product._id,
        title: product.name,
        category: product.categories?.name,
        description: product?.content?.replace(/<[^>]+>/g, ''),
        brand: product.brand?.name,
        image: product.image,
        quantity: 1
      });

  };

  const cikar = () => {
    removeFromCart(product._id);
  }

  return (
    <button
      className={`flex min-h-12 w-full whitespace-nowrap border border-transparent px-5 py-2 font-semibold gap-3 justify-center items-center transition hover:border-primary sm:w-auto ${isInCart(product._id) ? 'bg-green-300' : 'bg-gri'}`}
      onClick={isInCart(product._id) ? cikar : ekle} >

      {icon && <Image src={icon} alt='' width={10} height={25} />}
      <span> {label}   </span>
      {isInCart(product._id) ? '✔' : ''}
    </button>
  );
};

export default BasketButton;