"use client"

import { positionColumns } from "./columns"
import { useT } from "@/components/locale-provider"
import { PositionsToolbar } from "@/components/positions-toolbar"
import { DataTable, DataTableViewOptions } from "@/components/ui/data-table"
import type { PositionRow } from "@/lib/services/positions"

/**
 * The rows arrive already narrowed by the page, because search and the
 * department filter live in the url and are what somebody shares. Sorting,
 * paging and hidden columns stay here: they concern only the person looking.
 */
export function PositionsTable({
  rows,
  departments,
  vacantCount,
}: {
  rows: PositionRow[]
  departments: string[]
  vacantCount: number
}) {
  const t = useT()

  return (
    <DataTable
      columns={positionColumns(t)}
      data={rows}
      empty={t("positions.none")}
      toolbar={(table) => (
        <div className="flex flex-wrap items-center justify-between gap-3">
          <PositionsToolbar
            departments={departments}
            vacantCount={vacantCount}
          />
          <DataTableViewOptions table={table} />
        </div>
      )}
    />
  )
}