import React from "react";

export function Table({ variant = "default", className = "", children, ...props }) {
  return (
    <div className={["o-table-container", variant === "card" ? "o-table-container--card" : ""].filter(Boolean).join(" ")} data-slot="table-container" data-variant={variant}>
      <table className={["o-table", className].filter(Boolean).join(" ")} data-slot="table" {...props}>{children}</table>
    </div>
  );
}
export function TableHeader({ children, ...props }) { return <thead data-slot="table-header" {...props}>{children}</thead>; }
export function TableBody({ children, ...props }) { return <tbody data-slot="table-body" {...props}>{children}</tbody>; }
export function TableFooter({ children, ...props }) { return <tfoot data-slot="table-footer" {...props}>{children}</tfoot>; }
export function TableRow({ children, ...props }) { return <tr data-slot="table-row" {...props}>{children}</tr>; }
export function TableHead({ children, ...props }) { return <th data-slot="table-head" {...props}>{children}</th>; }
export function TableCell({ children, ...props }) { return <td data-slot="table-cell" {...props}>{children}</td>; }
export function TableCaption({ children, ...props }) { return <caption data-slot="table-caption" {...props}>{children}</caption>; }
