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

type Justify = 'center' | 'between' | 'around' | 'start' | 'end' | 'evenly' | 'stretch'
type Align = 'center' | 'end' | 'start' | 'stretch'
type FlexGap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
type FlexDirection = 'col' | 'row'

export interface FlexProps extends PropsWithChildren {
    justify?: Justify
    align?: Align
    gap?: FlexGap
    direction?: FlexDirection
    className?: string
}

const Flex = ({
    children,
    justify = 'start',
    align = 'start',
    gap = 2,
    direction = 'row',
    className
}: FlexProps) => {
    const flexClassName = cn(
        'flex',
        direction && `flex-${direction}`,
        justify && `justify-${justify}`,
        align && `items-${align}`,
        gap !== undefined && `gap-${gap}`,
        className
    )

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

export default Flex