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">
      <table className="w-full">
        <thead className="bg-background-secondary/70 border-b border-border">
          {headers}
        </thead>
        <tbody className="divide-y divide-border/60">
          {body}
        </tbody>
      </table>
      {footer && (
        <div className="px-6 py-3 border-t border-border/60 flex justify-between items-center bg-background-secondary/70">
          {footer}
        </div>
      )}
    </div>
  );
}
