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 CSSVars = React.CSSProperties & Record<`--${string}`, string>

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

export const ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(
  ({ asChild, className, gap = '4', style, ...props }, ref) => {
    const Comp = asChild ? Slot : 'div'
    const scrollStyle: CSSVars = {
      '--scroll-gap': `var(--mod-space-${gap})`,
      minWidth: 0,
      overflow: 'auto',
      paddingBlock: 'var(--scroll-gap)',
      paddingInline: 'var(--scroll-gap)',
      ...style,
    }

    return <Comp ref={ref} className={cn('@container block min-w-0', className)} style={scrollStyle} {...props} />
  },
)

ScrollArea.displayName = 'ScrollArea'