"use client";

import React, { useState } from "react";
import Title from "../tools/title";
import Text from "../text";

const productsTypes: string[] = [
  "trucks",
  "cranes",
  "forklift-trucks",
  "excavators",
  "road-repairs",
];

export default function Products() {

  //product type togle states
  const [productFilter,setProductFilter] = useState<string|null>(null);
  return (
    <div>
      {/* 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-3 items-center justify-center">
        {productsTypes.map((item, index) => (
          <button
            key={index}
            onClick={()=>setProductFilter(item)}
            className={`${productFilter === item ?'bg-secondary' : ''} hover:bg-secondary border-gray-300 hover:border-secondary border-[1px] px-10 py-3 text-2xl rounded-tr-full rounded-bl-full `}
          >
            <Text txt={item} />
          </button>
        ))}
      </div>

      {/* products */}
      <div></div>
    </div>
  );
}