import React from 'react';

import { cn } from '../copilot/cn';

// A CSS grid rather than a table, so a row can carry an expandable drawer
// underneath itself without colSpan gymnastics. Styles: styles/global.css.
interface DataGridProps {
  /** ``grid-template-columns`` value for wide viewports. */
  columns: string;
  /** Optional narrow-viewport template. Falls back to {@link columns}. */
  columnsSm?: string;
  className?: string;
  children: React.ReactNode;
}

export const DataGrid = ({
  columns,
  columnsSm,
  className,
  children,
}: DataGridProps): JSX.Element => (
  <div
    className={cn('vis-grid', className)}
    style={
      {
        '--vis-cols': columns,
        '--vis-cols-sm': columnsSm ?? columns,
      } as React.CSSProperties
    }
  >
    {children}
  </div>
);

export const DataGridHead = ({
  children,
}: {
  children: React.ReactNode;
}): JSX.Element => (
  <div className="vis-grid__head" role="row">
    {children}
  </div>
);

export const DataGridRow = ({
  className,
  children,
  ...rest
}: React.ComponentProps<'div'>): JSX.Element => (
  <div className={cn('vis-grid__row', className)} {...rest}>
    {children}
  </div>
);

export const DataGridFooter = ({
  children,
}: {
  children: React.ReactNode;
}): JSX.Element => <div className="vis-grid__foot">{children}</div>;

export default DataGrid;