import type { CSSProperties } from "react";
import type { PCOStyle, TableRow } from "./types";
import { pcoTableToCssVars } from "./pcoTheme";

type OverviewTableProps = {
  headers: string[];
  rows: TableRow[];
  tableStyle?: PCOStyle;
  inheritStyle?: PCOStyle;
};

export function OverviewTable({ headers, rows, tableStyle, inheritStyle }: OverviewTableProps) {
  if (!rows.length) return null;
  const cssVars = pcoTableToCssVars(tableStyle, inheritStyle) as CSSProperties;

  return (
    <div className="pco-table-wrap" style={cssVars}>
      <table className="pco-table">
        <thead>
          <tr>
            {headers.map((h) => (
              <th key={h}>{h}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((row, ri) => (
            <tr key={ri}>
              {headers.map((_, ci) => (
                <td key={ci}>{row[ci] ?? ""}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}