"use client";

import React, { useEffect, useState } from "react";
import Title from "../lib_components/title";
import Text from "../lib_components/text";
import { Asphalt, Ekskavator, Forklift, Kran, Truck } from "@/assets";
import Image from "next/image";
import type { productFilterTypes, ProductTypes } from "@/types";
import {
  allProducts,
  cranes,
  excavators,
  forklift,
  road_repairs,
  trucks,
} from "@/data";
import ProductCard from "../cards/productCard";

const productFilterTypesMainPage: productFilterTypes[] = [
  { name: "trucks", image: Truck },
  { name: "cranes", image: Kran },
  { name: "forklift-trucks", image: Ekskavator },
  { name: "excavators", image: Forklift },
  { name: "road-repairs", image: Asphalt },
  { name: "all", image: "" },
];

export default function Products() {
  const [productFilter, setProductFilter] = useState<string | null>(null);

  const [cars, setCars] = useState(allProducts);

  // execute filetr function
  useEffect(() => {
    if (productFilter === "trucks") {
      setCars(trucks);
    } else if (productFilter === "cranes") {
      setCars(cranes);
    } else if (productFilter === "forklift-trucks") {
      setCars(forklift);
    } else if (productFilter === "excavators") {
      setCars(excavators);
    } else if (productFilter === "road-repairs") {
      setCars(road_repairs);
    } else {
      setCars(allProducts);
    }
  }, [productFilter]);
  return (
    <div dir="ltr" className="max-w-[1200px] w-full mx-auto">
      {/* title part */}
      <div className="flex flex-col md:gap-8 gap-4">
        <div className="flex items-center justify-center w-full ">
          <div className="text-secondary px-2  py-1 text-[18px] font-semibold ">
            <Text txt="equipment" />
          </div>
          <div className="bg-primary text-secondary px-3 py-1 text-[18px] font-semibold ">
            <Text txt="amazing" />
          </div>
        </div>
        <Title text="pricing-h2" />
      </div>

      {/* product filters */}
      <div className="flex flex-wrap gap-1 gap-y-4 items-center justify-center mb-10 ">
        {productFilterTypesMainPage.map((item, index) => (
          <button
            key={index}
            onClick={() => setProductFilter(item.name)}
            className={`${
              productFilter === item.name ? "bg-secondary" : ""
            } flex items-center gap-2 h-[58px] hover:bg-secondary border-gray-300 hover:border-secondary border-[1px] px-7 text-2xl rounded-tr-full rounded-bl-full `}
          >
            <Text txt={item.name} />
            {item.image && (
              <Image
                src={item.image}
                alt="Truck images"
                width={50}
                height={50}
                className="object-cover"
              />
            )}
          </button>
        ))}
      </div>

      {/* products */}
      <div className="px-4 grid gap-5 grid-cols-1 place-content-center min-[500px]:grid-cols-2 min-lg:grid-cols-4 min-[1210px]:grid-cols-4">
        {cars.map((item: ProductTypes, index: number) => (
          <div key={index}>
            <ProductCard data={item} />
          </div>
        ))}
      </div>
    </div>
  );
}