import type { ReactNode } from "react";

export function Section({
  title,
  action,
  children,
}: {
  title: string;
  action?: ReactNode;
  children: ReactNode;
}) {
  return (
    <section className="surface-card p-5 md:p-6">
      <div className="border-border mb-4 flex flex-col items-start justify-between gap-3 border-b pb-3 md:flex-row md:items-center">
        <h3 className="text-lg font-bold">{title}</h3>
        {action}
      </div>
      {children}
    </section>
  );
}

export function DataTable({
  head,
  rows,
  empty = "Belum ada data.",
  alignLast = false,
}: {
  head: string[];
  rows: ReactNode[][];
  empty?: string;
  alignLast?: boolean;
}) {
  return (
    <div className="-mx-5 overflow-x-auto px-5 md:-mx-6 md:px-6">
      <table className="w-full min-w-[640px] border-collapse text-left text-sm">
        <thead>
          <tr className="bg-muted text-muted-foreground border-border border-b">
            {head.map((h, i) => (
              <th
                key={h}
                className={`p-3 font-semibold whitespace-nowrap ${alignLast && i === head.length - 1 ? "text-center" : ""}`}
              >
                {h}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.length === 0 ? (
            <tr>
              <td colSpan={head.length} className="text-muted-foreground p-6 text-center">
                {empty}
              </td>
            </tr>
          ) : (
            rows.map((row, ri) => (
              <tr key={ri} className="border-border hover:bg-muted/50 border-b transition-colors">
                {row.map((cell, ci) => (
                  <td key={ci} className="p-3 align-middle">
                    {cell}
                  </td>
                ))}
              </tr>
            ))
          )}
        </tbody>
      </table>
    </div>
  );
}