"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 BgGray from "./list/col/BgGray";
import UserLogin from "@/components/icons/UserLogin";
import { useState } from "react";

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

  return (
    <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} />
        <div className="relative flex flex-row-reverse gap-2">
          <Logo matchedCity={matchedCity} />
          <div className="flex lg:hidden z-20">
            <ButtonMenu isActive={isActive} setIsActive={setIsActive} />
            <Logo isAbsolute={true} matchedCity={matchedCity} />
          </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>
  );
}

export default Content;