import { listAllActresses, listActressCategories } from "@/lib/db/queries";
import { ActressDirectory } from "@/components/actress/ActressDirectory";
import { ActressCreateBar } from "@/components/actress/ActressCreateBar";
import { Users } from "lucide-react";

export const dynamic = "force-dynamic";

export default function ActressesPage() {
  const items = listAllActresses();
  const categories = listActressCategories();
  return (
    <div className="max-w-[1600px] mx-auto px-6 py-6 fade-in">
      <div className="flex items-center justify-between mb-6">
        <div>
          <h1 className="text-3xl font-semibold tracking-tight">Cast</h1>
          <p className="text-[var(--color-fg-dim)] mt-1">{items.length} total</p>
        </div>
        <ActressCreateBar />
      </div>

      {items.length === 0 ? (
        <div className="glass rounded-2xl p-card text-center">
          <Users className="w-8 h-8 mx-auto text-[var(--color-fg-dim)] mb-label" />
          <p className="text-[var(--color-fg-dim)]">No actresses yet. Create one above or add from any cover.</p>
        </div>
      ) : (
        <ActressDirectory items={items} categories={categories} />
      )}
    </div>
  );
}