components/main/index.tsx

"use client";

import { useState } from "react";
import { HiUserGroup, HiHeart, HiAdjustmentsHorizontal } from "react-icons/hi2";

import { InputGeneration } from "@/components/input-generation";
import { Button } from "@/components/button";

import { useInputGeneration } from "./hooks/useInputGeneration";
import { Collections } from "./collections";
import { Settings } from "./settings";
import { useUser } from "@/utils/useUser";

const categories = [
  {
    key: "community",
    label: "Community",
    icon: <HiUserGroup className="text-2xl" />,
  },
  {
    key: "my-own",
    label: "My generations",
    isLogged: true,
    icon: <HiHeart className="text-2xl" />,
  },
];

export const Main = () => {
  const user = false;
  const { openWindowLogin } = useUser();
  const { list_styles, style, setStyle, loading } = useInputGeneration();
  const [category, setCategory] = useState<string>("community");
  const [advancedSettings, setAdvancedSettings] = useState<boolean>(false);

  return (
    <main className="px-6 z-[2] relative max-w-[1722px] mx-auto">
      <div className="py-2 pl-2 pr-2 lg:pr-4 bg-black bg-opacity-30 backdrop-blur-sm lg:sticky lg:top-4 z-10 rounded-full">
        <div className="flex flex-col lg:flex-row items-center justify-between w-full">
          <InputGeneration />
          <div className="items-center justify-center lg:justify-end gap-5 w-full mt-6 lg:mt-0 hidden lg:flex">
            {categories.map(({ key, label, icon, isLogged }) =>
              isLogged && !user ? (
                <Button key={key} theme="white" onClick={openWindowLogin}>
                  Sign in with Hugging Face
                </Button>
              ) : (
                <Button
                  key={key}
                  disabled={loading}
                  theme={key !== category ? "white" : "primary"}
                  onClick={() => setCategory(key)}
                >
                  {icon}
                  {label}
                </Button>
              )
            )}
          </div>
        </div>
      </div>
      <p
        className="text-white/70 font-medium text-sm flex items-center justify-center lg:justify-start gap-2 hover:text-white cursor-pointer mt-3"
        onClick={() => setAdvancedSettings(!advancedSettings)}
      >
        <HiAdjustmentsHorizontal className="w-5 h-5" />
        Advanced settings
      </p>
      <Settings
        open={advancedSettings}
        style={style}
        setStyle={setStyle}
        list_styles={list_styles}
      />
      <Collections category={category} />
    </main>
  );
};