import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { cn } from './cva'

type SpaceToken = '1' | '2' | '3' | '4' | '5' | '6' | '8' | '10' | '12'
type Columns = 1 | 2 | 3
type CSSVars = React.CSSProperties & Record<`--${string}`, string>

export interface GridProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style'> {
  asChild?: boolean
  gap?: SpaceToken
  columns?: Columns
  style?: React.CSSProperties
}

const columnsClass: Record<Columns, string> = {
  1: 'grid-cols-1',
  2: 'grid-cols-1 @md:grid-cols-2',
  3: 'grid-cols-1 @md:grid-cols-2 @lg:grid-cols-3',
}

export const Grid = React.forwardRef<HTMLDivElement, GridProps>(
  ({ asChild, className, gap = '4', columns = 3, style, ...props }, ref) => {
    const Comp = asChild ? Slot : 'div'
    const gridStyle: CSSVars = {
      '--grid-gap': `var(--mod-space-${gap})`,
      gap: 'var(--grid-gap)',
      minWidth: 0,
      ...style,
    }

    return (
      <Comp
        ref={ref}
        className={cn('@container grid min-w-0', columnsClass[columns], className)}
        style={gridStyle}
        {...props}
      />
    )
  },
)

Grid.displayName = 'Grid'