"use client";

import { ProductTypes } from "@/types";
import Image from "next/image";
import Link from "next/link";
import Text from "../lib_components/text";
import { motion } from "framer-motion";
import { useParams } from "next/navigation";
import { useSubCategory } from "@/store/subCategory";

export default function SliderCard({ data }: { data: ProductTypes }) {
  const router = useParams();
  const setInitialSubcategory = useSubCategory(
    (state) => state.setInitialSubCategory,
  );
  return (
    <Link
      href={`/${router.lang}/${data.id}`}
      onClick={() => {
        setInitialSubcategory({
          name:data.truck_name,
          id: data.id,
        });
      }}
      id="news_slider_card"
      className="group hover:cursor-pointer block"
    >
      <motion.div
        initial={{ opacity: 0, y: 40 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.6, ease: "easeOut" }}
        whileTap={{ scale: 0.98 }}
        className="rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-all"
      >
        {/* Rasm qismi  for github*/}
        <Image
          src={data.image}
          alt="slider image"
          width={600}
          height={600}
          className="object-contain max-w-[600px] w-full h-[300px]"
        />

        {/* Pastki kontent */}
        <div className="relative overflow-visible mt-6 text-primary flex flex-col items-start p-4 justify-start bg-gray-50 border-b-6 border-gray-400 group hover:border-b-secondary">
          {/* Yuqoridagi belgi */}
          <motion.div
            className="absolute -top-10 sm:-top-8 text-[16px] font-semibold left-5 bg-secondary py-1 px-3 clip-trapezoid"
            whileHover={{ scale: 1.05 }}
            transition={{ type: "spring", stiffness: 200 }}
          >
            <Text txt={data.truck_name} />
          </motion.div>

          {/* Tavsif matni */}
          <div className="text-xl font-bold flex items-center h-[60px] hover:text-secondary transition-colors">
            <Text txt={data.desc} />
          </div>
        </div>
      </motion.div>
    </Link>
  );
}