import type { ReactNode } from "react";
import { cn } from "./cn";

// 轻量数据表格：细分隔线、左对齐表头(弱化)、行 hover。运维/数据场景的标准呈现。
// 用法：<Table cols={["任务","状态","耗时"]}><Tr>...<Td>...</Td></Tr></Table>

export function Table({ cols, children, className }: { cols: ReactNode[]; children: ReactNode; className?: string }) {
  return (
    <table className={cn("w-full border-collapse text-xs", className)}>
      <thead>
        <tr>
          {cols.map((c, i) => (
            <th key={i} className="border-b border-line px-2.5 py-2 text-left font-medium text-slate-500">
              {c}
            </th>
          ))}
        </tr>
      </thead>
      <tbody>{children}</tbody>
    </table>
  );
}

export function Tr({ children, onClick, className }: { children: ReactNode; onClick?: () => void; className?: string }) {
  return (
    <tr onClick={onClick} className={cn("border-b border-line/70 transition hover:bg-ink-800", onClick && "cursor-pointer", className)}>
      {children}
    </tr>
  );
}

export function Td({ children, className }: { children: ReactNode; className?: string }) {
  return <td className={cn("px-2.5 py-2 align-middle text-slate-300", className)}>{children}</td>;
}
