"use client";
import React, { useContext } from "react";
import logo from "../../../assets/images/logo.png";

import Image from "next/image";
import test1 from "../../../assets/images/product/1.png";
import test2 from "../../../assets/images/product/2.png";
import test3 from "../../../assets/images/product/3.png";
import test4 from "../../../assets/images/product/4.png";
import Link from "next/link";

const CardNormal = ({ data, priority }) => {
  return (
    <div className="group">
      {" "}
      <>
        <Link href={`/products/${data.id}`} onClick={(e)=>e.preventDefault()} >
          <div
            className={` tr03 py-2  overflow-hidden xs:h-[270px] lg:h-[270px] border border-gray-200   ${1 == 1 ? "bg-white  rounded-xl rounded-tl-[40px]" : " opacity-70"
              }`}
          >
           

            <div className="w-full h-fit flex justify-center  ">
              {!!data.mainImage ? (
                <Image
                  src={
                    data.mainImage == "1"
                      ? test1
                      : data.mainImage == "2"
                        ? test2
                        : data.mainImage == "3"
                          ? test3
                          : data.mainImage == "4"
                            ? test4
                            : test1
                  }
                  width={200}
                  height={200}
                  className="xs:!w-[110px] lg:!w-[130px] mx-auto"
                  priority={!!priority}
                  alt={`${data.persianName} - ${data.englishName}`}
                />
              ) : (
                <div className="xs:!w-[85px] lg:!w-[85px] h-[90px] xs:mt-5 lg:mt-10   ">
                  <Image
                    src={logo}
                    className="xs:!w-[70px] lg:!w-[70px]  mx-auto  opacity-25 mt-5"
                    alt="وسمه"
                  />
                </div>
              )}
            </div>
            <div className="p-3 text-left">
              <p className="mb-0 text-[16px]  max-h-[44px] overflow-hidden font-bold ">
                {data.englishName}
              </p>

              <p className="mb-0 text-[13px] text-gray-600 mt-2">
                {data.description}
              </p>
            </div>
          </div>
        </Link>
      </>
      <div className="relative">
        <div className="absolute w-full  bottom-0 ">
          <div className="bg-gray-100 rounded-t-3xl flex ltr  mt-2 border border-gray-100  p-2 items-center">
            <div className="flex w-full">
              <p className="mb-0 text-base ">${data.cost.toLocaleString()}</p>
            </div>

            <div className="w-full  text-right rounded-full pr-2">
              <p className="mb-0 text-base rounded-lg underline">Detail</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default CardNormal;
