import Header from "../../componensts/Header/Header";
import { Dropdown, DropdownItem } from "flowbite-react";
import { useState } from "react";
import { FaTimes } from "react-icons/fa";
import { FaBars } from "react-icons/fa";
import ProductCard from "../../componensts/ProductCard/ProductCard";
const ProductTipe = [
  {
    title: "Diesel Generator",
    products: ["Cummins", "Mitsu", "MTU"],
  },
  {
    title: "Marine",
    products: ["Cummins", "Mitsu", "MTU"],
  },
  {
    title: "Diesel Generator",
    products: ["Cummins", "Mitsu", "MTU"],
  },
  {
    title: "Marine",
    products: ["Cummins", "Mitsu", "MTU"],
  },
  {
    title: "Diesel Generator",
    products: ["Cummins", "Mitsu", "MTU"],
  },
  {
    title: "Marine",
    products: ["Cummins", "Mitsu", "MTU"],
  },
];

export default function ProductsPage() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const handleMenuToggle = () => {
    setIsMenuOpen(!isMenuOpen);
  };

  return (
    <div className="flex h-screen w-screen flex-col">
      <div className="flex h-1/2">
        <Header></Header>
      </div>

      <div className="flex justify-center items-center lg:h-96 h-1/2 overflow-hidden">
        <div className="flex w-4/5 text-black font-bold text-2xl lg:justify-between flex-col lg:flex-row lg:items-end justify-end pb-5 border-b-2 ml-auto mr-auto">
          <div>
            <span>Products</span>
          </div>
          <div>
            <span>Home - Products</span>
          </div>
        </div>
      </div>

      <div className="lg:hidden flex w-4/5 ml-auto mr-auto items-center justify-end">
        <div className="lg:hidden flex ">
          <button
            className="text-black w-full h-full"
            onClick={handleMenuToggle}
          >
            {isMenuOpen ? (
              <FaTimes size="1.5rem" fill="black" />
            ) : (
              <FaBars size="1.5rem" />
            )}
          </button>
        </div>

        <div></div>
      </div>
      <div>
        {isMenuOpen && (
          <div className="flex lg:hidden w-full justify-center items-center">
            <ul className="flex flex-col items-center py-4">
              <div className="flex flex-col gap-5">
                {ProductTipe.map((item, index) => {
                  return (
                    <div key={index}>
                      <Dropdown
                        label={item.title}
                        style={{
                          width: "20rem",
                          backgroundColor: "black",
                        }}
                      >
                        {item.products.map((el, index) => {
                          return (
                            <DropdownItem
                              key={index}
                              as={"a"}
                              href="#"
                              className="flex justify-center w-full"
                            >
                              {el}
                            </DropdownItem>
                          );
                        })}
                      </Dropdown>
                    </div>
                  );
                })}
              </div>
            </ul>
          </div>
        )}
      </div>

      <div className="lg:flex w-full lg:h-full hidden">
        <div className="flex w-3/5 h-full m-auto">
          <div className="flex flex-col gap-5">
            {ProductTipe.map((item, index) => {
              return (
                <div key={index}>
                  <Dropdown label={item.title} style={{ width: "15rem" }}>
                    {item.products.map((el, index) => {
                      return (
                        <DropdownItem key={index} as={"a"} href="#">
                          {el}
                        </DropdownItem>
                      );
                    })}
                  </Dropdown>
                </div>
              );
            })}
          </div>
        </div>
      </div>

      <div className="flex w-full min-h-0 bg-black flex-wrap justify-center items-center gap-x-3 mt-10">
        <div>
          <ProductCard></ProductCard>
          <ProductCard></ProductCard>
          <ProductCard></ProductCard>
          <ProductCard></ProductCard>
          <ProductCard></ProductCard>
        </div>
      </div>
    </div>
  );
}
Сделай так чтобы Menu толкало блоки только в низ