import * as React from 'react';
import { clsx } from 'clsx';

export type DataTableProps = React.TableHTMLAttributes<HTMLElement>;

export function DataTable({ className, children, ...props }: DataTableProps) {
  return (
    <div className="w-full overflow-x-auto rounded-xl border border-[var(--bl-border)] bg-[var(--bl-surface-card)] shadow-sm shadow-black/[0.04]">
      <table
        className={clsx(
          'w-full border-collapse text-left text-sm text-[var(--bl-text-primary)]',
          className
        )}
        {...props}
      >
        {children}
      </table>
    </div>
  );
}

export type DataTableHeaderProps = React.HTMLAttributes<HTMLElement>;

export function DataTableHeader({ className, ...props }: DataTableHeaderProps) {
  return <thead className={clsx('bg-[var(--bl-surface-muted)]/80', className)} {...props} />;
}

export type DataTableBodyProps = React.HTMLAttributes<HTMLElement>;

export function DataTableBody({ className, ...props }: DataTableBodyProps) {
  return <tbody className={clsx('divide-y divide-[var(--bl-border)]', className)} {...props} />;
}

export type DataTableRowProps = React.HTMLAttributes<HTMLElement>;

export function DataTableRow({ className, ...props }: DataTableRowProps) {
  return (
    <tr
      className={clsx('transition-colors hover:bg-[var(--bl-surface-muted)]/70', className)}
      {...props}
    />
  );
}

export type DataTableHeadProps = React.ThHTMLAttributes<HTMLElement>;

export function DataTableHead({ className, ...props }: DataTableHeadProps) {
  return (
    <th
      className={clsx(
        'px-4 py-3 text-xs font-semibold uppercase tracking-[0.08em] text-[var(--bl-text-secondary)]',
        className
      )}
      {...props}
    />
  );
}

export type DataTableCellProps = React.TdHTMLAttributes<HTMLElement>;

export function DataTableCell({ className, ...props }: DataTableCellProps) {
  return <td className={clsx('px-4 py-3 align-middle', className)} {...props} />;
}