import { PropsWithChildren } from 'react'
import { cn } from '@/utils/tailwind'

type GridRows = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
type GridCols = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
type GridGap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12

export interface GridProps extends PropsWithChildren {
    rows_tablet?: GridRows
    rows_mobile?: GridRows
    rows_desktop?: GridRows
    cols_mobile?: GridCols
    cols_tablet?: GridCols
    cols_desktop?: GridCols
    gap?: GridGap
    className?: string
}

const Grid = ({
    children,
    gap = 4,
    rows_mobile = 1,
    rows_tablet = 1,
    rows_desktop = 1,
    cols_mobile = 1,
    cols_tablet = 1,
    cols_desktop = 1,
    className
}: GridProps) => {
    const gridClassName = cn(
        'grid',
        // Cols
        cols_mobile && `grid-cols-${cols_mobile}`,
        cols_tablet && `md:grid-cols-${cols_tablet}`,
        cols_desktop && `lg:grid-cols-${cols_desktop}`,
        // Rows
        rows_mobile && `grid-rows-${rows_mobile}`,
        rows_tablet && `md:grid-rows-${rows_tablet}`,
        rows_desktop && `lg:grid-rows-${rows_desktop}`,
        // Gap
        gap !== undefined && `gap-${gap}`,
        // Custom classes
        className
    )


    return (
        <div className={gridClassName}>
            {children}
        </div>
    )
}

export default Grid