"use client";

import { Table } from "@heroui/react";

type RowItem = { id: string; action: string; status: string; detail: string };

const tableColumns = [
  { key: "action", label: "Action" },
  { key: "status", label: "Status" },
  { key: "detail", label: "Detail" },
];

export function HistoryTable({ rows }: { rows: RowItem[] }) {
  const data = rows.length ? rows : [{ id: "empty", action: "-", status: "empty", detail: "No requests yet" }];

  return (
    <Table className="w-full">
      <Table.Content className="w-full" aria-label="Auth request history">
        <Table.Header>
          {tableColumns.map((column, index) => (
            <Table.Column key={column.key} id={column.key} isRowHeader={index === 0}>
              {column.label}
            </Table.Column>
          ))}
        </Table.Header>
        <Table.Body items={data}>
          {(item) => (
            <Table.Row key={item.id} id={item.id}>
              <Table.Cell>{item.action}</Table.Cell>
              <Table.Cell>{item.status}</Table.Cell>
              <Table.Cell className="max-w-[520px] truncate">{item.detail}</Table.Cell>
            </Table.Row>
          )}
        </Table.Body>
      </Table.Content>
    </Table>
  );
}
