import { ListView } from "../../components/ListView/ListView";
import { DefaultService } from "../../api/services/DefaultService";
import { TitleCardSquare } from "../../components/cards/TitleCardSquare";
import { TitleCardHorizontal } from "../../components/cards/TitleCardHorizontal";
import type { Title } from "../../api";
import { useState } from "react";

const PAGE_SIZE = 20;
export default function TitlesPage() {
  const [search, setSearch] = useState("");

  const loadTitles = async (cursor: string, limit: number) => {
    const result = await DefaultService.getTitles(
      cursor,
      undefined,
      true,
      search,
      undefined,
      undefined,
      undefined,
      undefined,
      limit,
      undefined,
      'all'
    );

    return {
      items: result.data ?? [],
      cursor: result.cursor ?? null,
    };
  };

  return (
    <div className="w-full min-h-screen bg-gray-50 p-6 text-black flex flex-col items-center">
      
      <h1 className="text-4xl font-bold mb-6 text-center">Titles</h1>

      <ListView<Title>
        pageSize={PAGE_SIZE}
        fetchItems={loadTitles}
        searchPlaceholder="Search titles..."
        renderItem={(title, layout) =>
          layout === "square"
            ? <TitleCardSquare title={title} />
            : <TitleCardHorizontal title={title} />
        }
        setSearch={setSearch}
      />
    </div>
  );
}