import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@conusai-kit/ui/primitives"
// The imports applied so far. A server component: it holds no state, and every string is passed in.

import type { ReactElement } from "react"
import type { ImportView } from "../contract/index.js"

export interface ImportListLabels {
  /** How many imports, already filled with the plural form. */
  readonly count: string
  readonly caption: string
  readonly empty: string
  readonly source: string
  readonly status: string
  readonly created: string
  readonly updated: string
  readonly unchanged: string
  readonly refused: string
}

export function ImportList({
  imports,
  labels,
}: {
  imports: readonly ImportView[]
  labels: ImportListLabels
}): ReactElement {
  return imports.length === 0 ? (
    <p>{labels.empty}</p>
  ) : (
    <>
      <p>{labels.count}</p>
      <Table>
        <TableCaption>{labels.caption}</TableCaption>
        <TableHeader>
          <TableRow>
            <TableHead scope="col">{labels.source}</TableHead>
            <TableHead scope="col">{labels.status}</TableHead>
            <TableHead scope="col">{labels.created}</TableHead>
            <TableHead scope="col">{labels.updated}</TableHead>
            <TableHead scope="col">{labels.unchanged}</TableHead>
            <TableHead scope="col">{labels.refused}</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {imports.map((row) => (
            <TableRow key={row.importId}>
              <TableHead scope="row">{row.sourceName}</TableHead>
              <TableCell>{row.status}</TableCell>
              <TableCell>{row.created}</TableCell>
              <TableCell>{row.updated}</TableCell>
              <TableCell>{row.unchanged}</TableCell>
              <TableCell>{row.refused}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </>
  )
}