"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 { useState } from "react";
import ProfileUser from "./profile";

function Content({ matchedCity, name, logged }) {
  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} />
      {logged ? (
        <ProfileUser />
      ) : (
        <Link href="/login">
          <Button variant="outlined" color="primary">
            ورود | ثبت نام
          </Button>
        </Link>
      )}
    </div>
  );
}

export default Content;