"use client";
import logo from "../../../assets/images/logo.png";

import Image from "next/image";
import Link from "next/link";

const CardNormal = ({ product, priority }) => {
  return (
    <div className="group">
      {" "}
      <>
        <Link href={`/products/${product.slug}`} 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-full flex justify-center relative p-2 ">
              {!!product?.images?.[0]?.url ? (
                <Image
                  src={
                    product?.images?.[0]?.url
                  }
                  fill
                  className="object-contain"
                  priority={!!priority}
                  alt={`${product?.images?.[0]?.alternativeText}`}
                />
              ) : (
                <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"

                  />
                </div>
              )}
            </div>
            <div className="p-3 text-left">



            </div>
          </div>
        </Link>
      </>
      <div className="relative">
        <div className="absolute w-full  bottom-0 ">
          <div className="bg-gray-100 rounded-t-3xl ltr  mt-2 border border-gray-100  p-2 flex flex-col gap-1">
            <p className="mb-0 text-base text-left">
              {product.title}
            </p>
            {/* <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-sm rounded-lg text-left">{product.category.title} - {product.brand.title}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default CardNormal;
