import Link from "next/link";
import { Table, Td, Th, StatusBadge, EmptyState } from "@/components/ui";
import { formatDateTime } from "@/lib/utils";

export interface PageRow {
  id: string;
  title: string;
  status: string;
  updatedAt: Date;
  site: { name: string };
}

export function PageList({ pages, emptyTitle = "No pages", hrefFor }: { pages: PageRow[]; emptyTitle?: string; hrefFor?: (page: PageRow) => string }) {
  if (pages.length === 0) return <EmptyState title={emptyTitle} description="Nothing to show here right now." />;
  return (
    <Table>
      <thead>
        <tr>
          <Th>Title</Th>
          <Th>Site</Th>
          <Th>Status</Th>
          <Th>Updated</Th>
        </tr>
      </thead>
      <tbody>
        {pages.map((p) => (
          <tr key={p.id}>
            <Td className="font-medium">{hrefFor ? <Link href={hrefFor(p)} className="hover:underline">{p.title}</Link> : p.title}</Td>
            <Td>{p.site.name}</Td>
            <Td><StatusBadge value={p.status} /></Td>
            <Td>{formatDateTime(p.updatedAt)}</Td>
          </tr>
        ))}
      </tbody>
    </Table>
  );
}