"use client"

import { DataTable } from "@/components/ui/data-table"
import { useLocale, useT } from "@/components/locale-provider"
import type { MessageKey } from "@/lib/i18n/messages"
import type { TaskRow } from "@/lib/services/tasks"
import { taskColumns } from "./columns"

/**
 * The table, on the client, because the words in its headers come from the
 * reader and the columns are built from them.
 *
 * The page cannot build them: a column definition holds render functions, and a
 * Server Component cannot hand a function to a client one. So the page passes
 * rows and an empty-message key, and the words are chosen here.
 */
export function TasksTable({
  rows,
  empty,
  pageSize,
}: {
  rows: TaskRow[]
  empty: MessageKey
  pageSize?: number
}) {
  const t = useT()
  const locale = useLocale()

  return (
    <DataTable
      columns={taskColumns(t, locale)}
      data={rows}
      empty={t(empty)}
      pageSize={pageSize}
    />
  )
}