import type { ReactNode } from 'react';

interface TableProps {
  headers: ReactNode;
  body: ReactNode;
  footer?: ReactNode;
}

/** Shared data table — logical alignment (`text-start` / `text-end`) for LTR and RTL. */
export function Table({ headers, body, footer }: TableProps) {
  return (
    <div className="surface-card overflow-hidden">
      <div className="overflow-x-auto">
        <table className="w-full min-w-[36rem] border-collapse [&_th]:px-3 sm:[&_th]:px-6 [&_th]:py-3 [&_th]:text-start [&_td]:px-3 sm:[&_td]:px-6 [&_td]:py-1.5 [&_td]:text-start [&_th.text-center]:text-center [&_td.text-center]:text-center [&_th.text-end]:text-end [&_td.text-end]:text-end">
          <thead className="bg-background-secondary/70 border-b border-border">
            {headers}
          </thead>
          <tbody className="divide-y divide-border/60">
            {body}
          </tbody>
        </table>
      </div>
      {footer && (
        <div className="px-3 sm:px-6 py-3 border-t border-border/60 flex flex-col gap-2 sm:flex-row sm:justify-between sm:items-center bg-background-secondary/70">
          {footer}
        </div>
      )}
    </div>
  );
}
