import * as React from 'react';
import { cn } from '../../lib/utils';

export type TableDensity = 'standard' | 'compact';

export interface TableProps extends React.HTMLAttributes<HTMLDivElement> {
  density?: TableDensity;
}

export function Table(props: TableProps) {
  const { className, density = 'standard', ...rest } = props;
  return <div className={cn('shTable', density === 'compact' ? 'shTableCompact' : 'shTableStandard', className)} role="table" {...rest} />;
}

export function TableViewportLayout(props: React.HTMLAttributes<HTMLDivElement>) {
  const { className, ...rest } = props;
  return <div className={cn('shTableViewportLayout', className)} {...rest} />;
}

export function TableToolbar(props: React.HTMLAttributes<HTMLDivElement>) {
  const { className, ...rest } = props;
  return <div className={cn('shTableToolbar', className)} {...rest} />;
}

export function TableSummary(props: React.HTMLAttributes<HTMLDivElement>) {
  const { className, ...rest } = props;
  return <div className={cn('shTableSummary', className)} {...rest} />;
}

export function TableFooter(props: React.HTMLAttributes<HTMLDivElement>) {
  const { className, ...rest } = props;
  return <div className={cn('shTableFooter', className)} {...rest} />;
}

export function TablePageActions(props: React.HTMLAttributes<HTMLDivElement>) {
  const { className, ...rest } = props;
  return <div className={cn('shTablePageActions', className)} {...rest} />;
}

export function TableRow(props: React.HTMLAttributes<HTMLDivElement>) {
  const { className, ...rest } = props;
  return <div className={cn('shTableRow', className)} role="row" {...rest} />;
}

export function TableHead(props: React.HTMLAttributes<HTMLDivElement>) {
  const { className, ...rest } = props;
  return <div className={cn('shTableHead', className)} role="columnheader" {...rest} />;
}

export function TableCell(props: React.HTMLAttributes<HTMLDivElement>) {
  const { className, ...rest } = props;
  return <div className={cn('shTableCell', className)} role="cell" {...rest} />;
}

export function EmptyState(props: { title: string; description?: string }) {
  return (
    <div className="emptyState">
      <strong>{props.title}</strong>
      {props.description && <span>{props.description}</span>}
    </div>
  );
}
