"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";

export default function InnerProductcard({ data }: { data: innerCardTypes }) {
  const route = useParams();
  const { setDetail } = useCarDetail();

  return (
    <motion.div
      initial={{ opacity: 0, y: 40 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, amount: 0.2 }}
      transition={{ duration: 0.5, ease: "easeOut" }}
      whileHover={{
        scale: 1.05,
        boxShadow: "0px 0px 15px rgba(0,0,0,0.1)",
      }}
      whileTap={{ scale: 0.97 }}
      className="rounded-lg overflow-hidden bg-white transition-all"
    >
      <Link
        href={`/${route.lang}/${route.carType}/${data.name}`}
        onClick={() => setDetail(data)}
        className="flex flex-col items-center justify-between rounded-lg hover:cursor-pointer"
      >
        {/* Rasm qismi */}
        <div className="rounded-t-lg bg-white">
          <Image
            src={data.image}
            alt={data.name}
            width={0}
            height={200}
            className="object-fill w-full max-h-[200px] h-full rounded-t-sm"
          />
        </div>

        {/* Pastki qism */}
        <div className="bg-[#fafafa] w-full p-2 px-4 rounded-b-lg flex flex-col items-start justify-start gap-2">
          <div className="text-xl font-semibold">
            <Text txt={data.name} />
          </div>

          <div className="flex gap-2">
            <Text txt="hour-price" />
            {data.price?.toLocaleString("uz-UZ")}
            <Text txt="wallet" />
          </div>

          <div className="flex gap-2">
            <Text txt="min-time" />
            {data.min_order_time}
            <Text txt="time" />
          </div>

          {/* Tugma animatsiyasi */}
          <motion.button
            whileHover={{
              scale: 1.05,
              backgroundColor: "#ffffff",
              color: "#dc2626", // hoverda text-secondary (agar sizda secondary = red)
              borderColor: "#dc2626",
            }}
            whileTap={{ scale: 0.95 }}
            transition={{ duration: 0.3 }}
            className="w-full p-3 bg-secondary rounded-lg text-white border-2 border-secondary"
          >
            <Text txt="more" />
          </motion.button>
        </div>
      </Link>
    </motion.div>
  );
}