export function Table({ children }: { children: React.ReactNode }) {
  return (
    <div className="overflow-x-auto">
      <table className="w-full border-collapse text-left text-sm">{children}</table>
    </div>
  );
}

export function Thead({ children }: { children: React.ReactNode }) {
  return <thead className="border-b border-border text-xs font-medium text-ink-muted">{children}</thead>;
}

export function Th({ children }: { children: React.ReactNode }) {
  return <th className="px-5 py-2.5 font-medium">{children}</th>;
}

export function Tbody({ children }: { children: React.ReactNode }) {
  return <tbody className="divide-y divide-border">{children}</tbody>;
}

export function Tr({ children }: { children: React.ReactNode }) {
  return <tr className="hover:bg-canvas/60">{children}</tr>;
}

export function Td({ children, mono = false }: { children: React.ReactNode; mono?: boolean }) {
  return <td className={`px-5 py-3 text-ink ${mono ? "font-mono text-xs" : ""}`}>{children}</td>;
}