"use client";

import Image from "next/image";
import Link from "next/link";
import Text from "../lib_components/text";
import { useParams } from "next/navigation";
import { motion } from "framer-motion";
import { useCarType } from "@/store/carType";

export default function ProductCard({ data }: { data: any }) {
  const { lang } = useParams();

  const setInitialCar = useCarType((state) => state.setInitialCar);
  const carData = {
    name: data?.name,
    id: data?.id,
  };

  console.log("data: ", data);

  return (
    <motion.div
      initial={{ opacity: 0, y: 50 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, amount: 0.2 }}
      transition={{ duration: 0.3, ease: "easeOut" }}
      whileHover={{
        boxShadow: "0px 0px 15px rgba(0,0,0,0.8)",
      }}
      whileTap={{ scale: 0.98 }}
      className="rounded-xl border-2 border-primary h-[430px]"
    >
      <Link
        href={`/${lang}/${data.name}`}
        onClick={() => setInitialCar(carData)}
        className="h-full flex flex-col items-center justify-between rounded-lg bg-white transition-transform"
      >
        {/* Yuqori qism - rasm */}
        <div className="rounded-t-lg bg-white py-10 px-2 flex justify-center items-center">
          <Image
            src={data.image}
            alt={data.name}
            width={260}
            height={200}
            className="object-contain max-h-[200px] h-full rounded-xl"
          />
        </div>

        {/* Pastki qism - matn */}
        <div className="bg-[#fafafa] w-full py-5 rounded-b-lg flex flex-col items-center justify-center space-y-1">
          <div className="font-medium text-primary text-xl text-center">
            <Text txt={data.name} />
          </div>
          <div className="text-secondary text-md font-extrabold text-center">
            <Text txt="agreement" />
          </div>
          <div className="text-center text-secondary bg-primary max-w-[200px] w-full rounded-xl text-lg py-2 hover:cursor-pointer">
            <Text txt="more" />
          </div>
        </div>
      </Link>
    </motion.div>
  );
}