"use client";
import Image from "next/image";
import Link from "next/link";
import { useCart } from "@/context/CartContex";

interface Props {
  id: string;
  title: string;
  image?: string;
  brand?: string;
  content: string;
  category?: string;
  link: string;
}

const SeriItem: React.FC<Props> = ({
  id,
  category,
  content,
  title,
  brand,
  link,
  image,
}) => {
  // Sepet durumu


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


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

  const cikar = () => {
    removeFromCart(id)
  }

  return (
    <div
      className={`flex flex-col md:flex-row py-10 md:py-0 text-center md:text-left items-center border border-gray-200 ${isInCart(id) ? 'bg-green-200 ' : 'even:bg-acikgri odd:bg-gri'}  ${isInCart(id) ? "bg-green-100 border border-green-600" : ""
        }`}
    >
      <div className="w-28 relative bg-white border min-h-28  h-full ">
        {image && <Image src={image} fill className="object-contain bg-white p-3  " alt="" />}
      </div>
      <div className="flex flex-col justify-center px-7">
        <span className="font-semibold"> {brand}   </span>
        <span className="text-xs"> {category} </span>
      </div>
      <div className="px-4 gap-2 flex-1">
        <Link href={link} prefetch={false} className="flex flex-col gap-1">
          <h5 className="font-semibold"> {title} </h5>
          <div className="text-xs h-8 overflow-hidden"> <div dangerouslySetInnerHTML={{ __html: content as string }} /> </div>
          <Image src={"/ico_teklif.svg"} width={15} height={10} alt="" />
        </Link>
      </div>
      <div className="px-8">


        <button
          onClick={isInCart(id) ? cikar : ekle}
          className={`${isInCart(id) ? 'bg-green-400 text-[12px] ' : 'bg-primary text-[24px]'} text-white px-3 py-1  w-14 h-14 border-2 border-white`}

        >
          {isInCart(id) ? "✔" : "+"}
        </button>
      </div>
    </div>
  );
};

export default SeriItem;