"use client";

import { backOne } from "@/assets";
import Image from "next/image";
import { useParams } from "next/navigation";
import Text from "../lib_components/text";
import Link from "next/link";
import { useCarType } from "@/store/carType";
import { useSubCategory } from "@/store/subCategory";

export default function CarType_Header() {
  const params = useParams();
  const initialCar = useCarType((state) => state.initialCar);
  const initialSubCategory = useSubCategory(
    (state) => state.initialSubCategory,
  );
  return (
    <div
      dir="ltr"
      className="w-full h-[300px] relative flex items-center justify-center max-sm:px-2"
    >
      {/* back image for gitea */}
      <Image
        alt="CarTypeImage"
        src={backOne}
        className="w-full h-full object-center object-cover absolute top-0 left-0 -z-20"
      />

      {/* opacity */}
      <div className="absolute top-0 left-0 w-full h-full -z-10 bg-black opacity-70"></div>

      {/* title */}
      <div
        id="title-Part"
        className="flex flex-col items-center justify-center gap-4"
      >
        <div
          id="title"
          className="text-white font-bold text-4xl tracking-[2px]"
        >
          <Text txt={`${initialSubCategory.name}`} />
        </div>

        <div
          id="under-title"
          className="text-white flex items-center justify-center gap-3"
        >
          <Link
            href="/"
            className="hover:cursor-pointer hover:text-secondary  "
          >
            <Text txt="home" />
          </Link>
          /
          <Link
            href={`/${params.lang}/${params.carType}`}
            className={
              params.carDeatil
                ? "hover:text-secondary hover:cursor-pointer"
                : "text-secondary"
            }
          >
            {initialSubCategory.name}
          </Link>
          {params.carDeatil && "/"}
          {params.carDeatil && (
            <div className="text-secondary">{initialCar.name}</div>
          )}
        </div>
      </div>
    </div>
  );
}
