'use client'

import type * as React from 'react'
import { cn } from '@admin/utils/shared/cn'

type DataGridProps = React.ComponentProps<'div'> & {
  containerClassName?: string
  containerRef?: React.Ref<HTMLDivElement>
  gridTemplateColumns: string
}

function DataGrid({
  className,
  containerClassName,
  containerRef,
  gridTemplateColumns,
  style,
  ...props
}: DataGridProps) {
  return (
    <div
      ref={containerRef}
      data-slot="data-grid-container"
      className={cn('relative min-w-0 overflow-auto', containerClassName)}
    >
      <div
        role="table"
        data-slot="data-grid"
        className={cn('grid min-w-full text-sm', className)}
        style={{ ...style, gridTemplateColumns }}
        {...props}
      />
    </div>
  )
}

export { DataGridBody } from './data-grid-body'
export { DataGridCell } from './data-grid-cell'
export { DataGridHead } from './data-grid-head'
export { DataGridHeader } from './data-grid-header'
export { DataGridRow } from './data-grid-row'
export { DataGrid }