import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@conusai-kit/ui/primitives"
// A document's versions. A server component: it holds no state, and every string is passed in.

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

export interface VersionsLabels {
  readonly title: string
  /** How many versions, already filled with the plural form. */
  readonly count: string
  readonly caption: string
  readonly sequence: string
  readonly mediaType: string
  readonly size: string
  readonly hash: string
  readonly created: string
}

export function Versions({
  versions,
  labels,
}: {
  versions: readonly VersionView[]
  labels: VersionsLabels
}): ReactElement {
  return (
    <section>
      <h2>{labels.title}</h2>
      <p>{labels.count}</p>
      <Table>
        <TableCaption>{labels.caption}</TableCaption>
        <TableHeader>
          <TableRow>
            <TableHead scope="col">{labels.sequence}</TableHead>
            <TableHead scope="col">{labels.mediaType}</TableHead>
            <TableHead scope="col">{labels.size}</TableHead>
            <TableHead scope="col">{labels.hash}</TableHead>
            <TableHead scope="col">{labels.created}</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {versions.map((version) => (
            <TableRow key={version.versionId}>
              <TableHead scope="row">{version.sequence}</TableHead>
              <TableCell>{version.mediaType}</TableCell>
              <TableCell>{version.size}</TableCell>
              <TableCell>
                <code>{version.sha256.slice(0, 12)}</code>
              </TableCell>
              <TableCell>{version.createdAt.slice(0, 10)}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </section>
  )
}