import { apiFetch } from "@/lib/api";
import { ClientsManager } from "@/components/clients-manager";

interface Client {
  id: string;
  name: string;
  email: string | null;
  hourlyRate: number;
  currency: string;
  _count?: { entries: number };
}

async function load(): Promise<Client[]> {
  const res = await apiFetch("/v1/clients");
  if (!res.ok) return [];
  return res.json();
}

export default async function ClientsPage() {
  const clients = await load();
  return (
    <div>
      <div className="mb-6">
        <h1 className="text-3xl font-bold mb-1">Clients</h1>
        <p className="text-white/50 text-sm">Set hourly rates and emails so invoices auto-generate correctly.</p>
      </div>
      <ClientsManager initial={clients} />
    </div>
  );
}