"use client";

import { Button } from "@mui/material";
import Logo from "@/app/component/Logo";
import Link from "next/link";
import Row from "./list/Row";
import Col from "./list/col";
import ButtonMenu from "./list/col/ButtonMenu";
import { useState } from "react";
import BgGray from "./list/col/BgGray";
import UserLogin from "@/components/icons/UserLogin";

function Header({ name }) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div className="bg-[#FFF] rounded-lg w-full mx-auto">
      <div
        className={`
                px-[8px] sm:px-[16px] md:px-[24px] lg:px-[32px] py-[4px] sm:py-[8px] md:py-[12px] lg:py-[16px] flex transition-all duration-500 overflow-hidden justify-between items-center flex-nowrap
                ${isActive ? "!pr-0" : "!px-4"}
            `}
      >
        <div>
          <BgGray isActive={isActive} setIsActive={setIsActive} />
          <Col name={name} isActive={isActive} setIsActive={setIsActive} />
          <div className="relative flex flex-row-reverse gap-2">
            <Logo />
            <div className="flex lg:hidden z-20">
              <ButtonMenu isActive={isActive} setIsActive={setIsActive} />
              <Logo isAbsolute={true} />
            </div>
          </div>
        </div>
        <Row name={name} />
        <Link href="/login">
          <Button
            className="!hidden lg:!flex"
            variant="outlined"
            color="primary"
          >
            ورود | ثبت نام
          </Button>
          <Button
            className={`!flex lg:!hidden !p-2 !rounded-full transition-all duration-500 !bg-[#EFEFEF]`}
            variant="text"
            color="primary"
          >
            <div className="flex lg:hidden">
              <UserLogin />
            </div>
          </Button>
        </Link>
      </div>
    </div>
  );
}

export default Header;