"use client";
import React from "react";
import { useTranslation } from "react-i18next";
import BoldIcon from "@/components/ui/BoldIcon";

interface Cart {
  image: string;
  title: string;
  price: number;
  discountedPrice: number;
  score: number;
  monetaryUnit: string;
  heartStyle: string;
  style: string;
}

export default function ProductCart(props: Cart) {
  const { t } = useTranslation("common");
  return (
    <div
      className={`${props.style} max-tablet-lg:justify-start max-tablet-lg:px-4 max-tablet-lg:py-2 max-tablet-lg:flex-row max-tablet-lg:w-full max-tablet-lg:max-w-full max-tablet-lg:h-auto  w-[240px]  max-laptop-xl:w-[210px] max-laptop-xl:h-[330px] cursor-pointer bg-white  flex flex-col justify-between py-1 max-tablet-lg:border-b max-tablet-lg:shadow-none max-tablet-lg:border-0 items-center max-w-[310px] h-[370px] max-h-[459px] border-2 border-neutral-300`}
    >
      <img
        src={props.image}
        alt="product image"
        className="h-52 max-Wide-mobile-2xl:h-36 max-laptop-xl:h-40"
      />
      <div className="flex max-tablet-lg:hidden  h-full flex-col items-center justify-between">
        <div className="w-full text-sm px-3 max-laptop-xl:px-1.5 max-laptop-xl:text-[12px] mt-1.5 font-bold text-neutral-500">
          <p className="line-clamp-2">{props.title}</p>
        </div>

        <div className="px-3  font-bold flex flex-row w-full items-center justify-between mt-4">
          <div className="">
            <div className="text-neutral-900 flex  items-center gap-1 rtl:flex-row-reverse">
              <span className="text-sm text-neutral-400 max-laptop-xl:text-[11px]">
                {props.monetaryUnit}
              </span>
              <span
                className={`
                  ${
                    props.discountedPrice
                      ? "line-through text-neutral-400 text-sm"
                      : ""
                  } max-laptop-xl:text-xs
                `}
              >
                {props.price}
              </span>
            </div>

            {props.discountedPrice > 0 && (
              <div className="text-black font-bold flex items-center gap-1 rtl:flex-row-reverse">
                <span className="text-sm max-laptop-xl:text-[11px]">
                  {props.monetaryUnit}
                </span>
                <span className="max-laptop-xl:text-xs">
                  {props.discountedPrice.toLocaleString()}
                </span>
              </div>
            )}
          </div>
          <div className="text-white max-laptop-xl:text-xs max-laptop-xl:h-5 max-laptop-xl:w-12 text-sm flex justify-center items-center dark:bg-neutral-500 bg-cyan-500 rounded-full h-6 w-14">
            {Math.floor(100 - props.discountedPrice / (props.price / 100))}%
          </div>
        </div>

        <div className="w-full max-Wide-mobile-2xl:mt-2 justify-center items-center flex flex-col">
          <div className="flex ltr:flex-row-reverse px-3 text-xl flex-row w-full justify-between items-center">
            <div className="flex max-laptop-xl:text-[15px] ltr:flex-row-reverse gap-1 text-yellow-400 flex-row items-center">
              <span className="">{props.score}</span>
              <span className="">
                <BoldIcon name="star" size={20} tinted className="text-yellow-400" />
              </span>
            </div>
            <div className="flex ltr:flex-row-reverse flex-row-reverse gap-3 items-center">
              <div className={`2 ${props.heartStyle}`}>
                <BoldIcon name="heart" size={20} tinted className="text-current" />
              </div>
              <div className="dark:text-black">
                <BoldIcon name="share" size={20} tinted className="text-current" />
              </div>
            </div>
          </div>

          {/* <div className="h-9 w-72 font-bold rounded-md border-2 mt-1.5 dark:text-neutral-500 dark:border-neutral-500 text-cyan-500 border-cyan-500 flex justify-center items-center">
            {t("home.productCartBtnValue")}
          </div> */}
        </div>
      </div>
      <div className="flex tablet-lg:hidden w-full h-full flex-col items-center justify-between">
        <div className="w-full text-sm px-3 max-laptop-xl:px-1.5 max-laptop-xl:text-[12px] mt-1.5 font-bold text-neutral-500">
          <p className="line-clamp-2">{props.title}</p>
        </div>

        <div className="px-3  font-bold flex flex-row w-full items-center justify-between mt-4">
          <div className="">
            <div className="text-neutral-900 flex  items-center gap-1 rtl:flex-row-reverse">
              <span className="text-sm text-neutral-400 max-laptop-xl:text-[11px]">
                {props.monetaryUnit}
              </span>
              <span
                className={`
                  ${
                    props.discountedPrice
                      ? "line-through text-neutral-400 text-sm"
                      : ""
                  } max-laptop-xl:text-xs
                `}
              >
                {props.price}
              </span>
            </div>

            {props.discountedPrice > 0 && (
              <div className="text-black font-bold flex items-center gap-1 rtl:flex-row-reverse">
                <span className="text-sm max-laptop-xl:text-[11px]">
                  {props.monetaryUnit}
                </span>
                <span className="max-laptop-xl:text-xs">
                  {props.discountedPrice.toLocaleString()}
                </span>
              </div>
            )}
          </div>
          <div className="text-white max-laptop-xl:text-xs max-laptop-xl:h-5 max-laptop-xl:w-12 text-sm flex justify-center items-center dark:bg-neutral-500 bg-cyan-500 rounded-full h-6 w-14">
            {Math.floor(100 - props.discountedPrice / (props.price / 100))}%
          </div>
        </div>

        <div className="flex ltr:flex-row-reverse px-3 text-xl flex-row w-full justify-between items-center">
          <div className="flex max-laptop-xl:text-[15px] ltr:flex-row-reverse gap-1 text-yellow-400 flex-row items-center">
            <span className="">{props.score}</span>
            <span className="">
              <BoldIcon name="star" size={20} tinted className="text-yellow-400" />
            </span>
          </div>
          <div className="flex ltr:flex-row-reverse flex-row-reverse gap-3 items-center">
            <div className={`2 ${props.heartStyle}`}>
              <BoldIcon name="heart" size={20} tinted className="text-current" />
            </div>
            <div className="dark:text-black">
              <BoldIcon name="share" size={20} tinted className="text-current" />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
