"use client";

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

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

import { useInputGeneration } from "./hooks/useInputGeneration";
import { Collections } from "./collections";

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

export const Main = () => {
  const { prompt, setPrompt, submit, loading } = useInputGeneration();
  const [category, setCategory] = useState<string>("community");

  return (
    <main className="pt-6 z-[2] relative">
      <div className="px-6 mx-auto max-w-7xl">
        <div className="flex flex-col lg:flex-row items-center justify-between w-full -translate-y-1/2">
          <InputGeneration
            prompt={prompt}
            onChange={setPrompt}
            onSubmit={submit}
            loading={loading}
          />
          <div className="flex items-center justify-center lg:justify-end gap-5 w-full mt-6 lg:mt-0">
            {categories.map(({ key, label, icon }) => (
              <Button
                key={key}
                theme={key !== category ? "white" : "primary"}
                onClick={() => setCategory(key)}
              >
                {icon}
                {label}
              </Button>
            ))}
          </div>
        </div>
      </div>
      <Collections />
    </main>
  );
};