"use client";
import { innerCardTypes } from "@/types";
import Link from "next/link";
import { useParams } from "next/navigation";
import React from "react";
import Image from "next/image";
import Text from "../lib_components/text";
import { useCarDetail } from "../lib_components/carDetailProvider";
import { motion } from "framer-motion";
import { useCarType } from "@/store/carType";

export default function InnerProductcard({ data }: { data: any }) {
  const route = useParams();
  const { setDetail } = useCarDetail();
  const setInitialCar = useCarType((state) => state.setInitialCar);

  const carInfo = {
    id: data?.id,
    name: data?.name,
  };

  return (
    <Link
      href={`/${route.lang}/${route.carType}/${data.name}`}
      onClick={() => {
        setDetail(data);
        setInitialCar(carInfo);
      }}
      className="block h-full"
    >
      <motion.div
        initial={{ opacity: 0, y: 40 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true, amount: 0.2 }}
        transition={{ duration: 0.5, ease: "easeOut" }}
        className="h-full group"
      >
        <div
          className="h-full bg-white rounded-2xl overflow-hidden border-2 border-gray-100 
                        hover:border-[#f2a01c] transition-all duration-300 
                        shadow-sm hover:shadow-xl flex flex-col"
        >
          {/* Rasm container - katta va responsive */}
          <div
            className="relative w-full aspect-[4/3] bg-gradient-to-br from-gray-50 via-white to-gray-50 
                          overflow-hidden group-hover:bg-gradient-to-br group-hover:from-orange-50 
                          group-hover:via-white group-hover:to-orange-50 transition-all duration-500"
          >
            {/* Rasm */}
            <div className="absolute inset-0 p-6 flex items-center justify-center">
              <motion.div
                whileHover={{ scale: 1.05 }}
                transition={{ duration: 0.4 }}
                className="relative w-full h-full"
              >
                <Image
                  src={data.image}
                  alt={data.name}
                  fill
                  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
                  className="object-contain"
                  priority
                />
              </motion.div>
            </div>

            {/* Dekorativ element */}
            <div
              className="absolute top-4 right-4 w-12 h-12 bg-[#f2a01c]/10 rounded-full 
                            flex items-center justify-center opacity-0 group-hover:opacity-100 
                            transition-opacity duration-300"
            >
              <svg
                className="w-6 h-6 text-[#f2a01c]"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M9 5l7 7-7 7"
                />
              </svg>
            </div>
          </div>

          {/* Content qismi */}
          <div className="flex-1 p-6 flex flex-col justify-between bg-white">
            {/* Nomi va tavsif */}
            <div className="mb-4">
              <h3
                className="text-xl font-bold text-[#0c1239] mb-2 line-clamp-2 
                             group-hover:text-[#f2a01c] transition-colors duration-300"
              >
                <Text txt={data.name} />
              </h3>

              {/* Agar qo'shimcha ma'lumot bo'lsa */}
              {data.description && (
                <p className="text-sm text-gray-600 line-clamp-2">
                  <Text txt={data.description} />
                </p>
              )}
            </div>

            {/* Tugma - past qismda */}
            <div className="pt-4 border-t border-gray-100">
              <motion.div
                whileHover={{ x: 4 }}
                transition={{ duration: 0.2 }}
                className="flex items-center justify-between text-[#f2a01c] font-semibold"
              >
                <span>
                  <Text txt="more" />
                </span>
                <svg
                  className="w-5 h-5"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M9 5l7 7-7 7"
                  />
                </svg>
              </motion.div>
            </div>
          </div>
        </div>
      </motion.div>
    </Link>
  );
}