"use client";

import { useMemo } from "react";
import { DataTable, type DataTableFilter } from "@/components/data-table/data-table";
import { siteColumns, type SiteRow } from "@/components/sites/columns";

export function SitesTable({ rows }: { rows: SiteRow[] }) {
  const filters = useMemo<DataTableFilter[]>(() => {
    const codes = new Set<string>();
    for (const row of rows) {
      for (const target of row.targets) codes.add(`${target.country} · ${target.language}`);
    }
    if (codes.size < 2) return [];
    const options = [...codes]
      .sort((a, b) => a.localeCompare(b, "fr"))
      .map((code) => ({ value: code, label: code }));
    return [{ columnId: "targetsLabel", label: "Cible", options }];
  }, [rows]);

  return (
    <DataTable
      columns={siteColumns}
      data={rows}
      searchLabel="Rechercher un site"
      filters={filters}
      emptyMessage="Aucun site ne correspond."
    />
  );
}