import type { ReactNode } from 'react';

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

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] [&_th]:px-3 sm:[&_th]:px-6 [&_td]:px-3 sm:[&_td]:px-6">
          <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>
  );
}