"use client";

import { ProductTypes } from "@/types";
import Image from "next/image";
import Link from "next/link";
import Text from "../lib_components/text";
import { useParams } from "next/navigation";

export default function ProductCard({ data }: { data: ProductTypes }) {
  const { lang } = useParams();
  return (
    <Link
      href={`/${lang}/${data.path}`}
      className="h-[400px] flex flex-col items-center justify-between rounded-sm hover:scale-105 hover:cursor-pointer hover:shadow-[0px_0px_5px_10px_#ebebeb]"
    >
      <div className="rounded-t-lg bg-white py-15 px-2">
        <Image
          src={data.image}
          alt={data.truck_name}
          width={200}
          height={200}
          className="object-contain max-h-[200px] h-full"
        />
      </div>
      <div className="bg-[#fafafa] w-full py-5 rounded-b-lg flex flex-col items-center justify-center ">
        <p>
          <Text txt={data.truck_name} />
        </p>
        <p className="text-secondary">
          <Text txt={data.desc} />
        </p>
      </div>
    </Link>
  );
}