import React from 'react';

const Table = ({ children, className = "" }) => (
    <div className="relative w-full overflow-auto">
        <table className={`w-full caption-bottom text-sm ${className}`}>
            {children}
        </table>
    </div>
);

const TableHeader = ({ children }) => (
    <thead className="[&_tr]:border-b border-slate-200 bg-slate-50/50">
        {children}
    </thead>
);

const TableBody = ({ children }) => (
    <tbody className="[&_tr:last-child]:border-0">
        {children}
    </tbody>
);

const TableRow = ({ children, className = "" }) => (
    <tr className={`border-b border-slate-100 transition-colors hover:bg-slate-50/50 data-[state=selected]:bg-slate-50 ${className}`}>
        {children}
    </tr>
);

const TableHead = ({ children, className = "" }) => (
    <th className={`h-12 px-4 text-left align-middle font-medium text-slate-500 [&:has([role=checkbox])]:pr-0 ${className}`}>
        {children}
    </th>
);

const TableCell = ({ children, className = "" }) => (
    <td className={`p-4 align-middle [&:has([role=checkbox])]:pr-0 ${className}`}>
        {children}
    </td>
);

export { Table, TableHeader, TableBody, TableRow, TableHead, TableCell };