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 AspectRatioProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style'> {
  asChild?: boolean
  gap?: SpaceToken
  ratio?: number
  style?: React.CSSProperties
}

export const AspectRatio = React.forwardRef<HTMLDivElement, AspectRatioProps>(
  ({ asChild, children, className, gap = '4', ratio = 16 / 9, style, ...props }, ref) => {
    const Comp = asChild ? Slot : 'div'
    const aspectStyle: CSSVars = {
      '--aspect-gap': `var(--mod-space-${gap})`,
      aspectRatio: `${ratio}`,
      minWidth: 0,
      paddingBlock: 'var(--aspect-gap)',
      ...style,
    }

    return (
      <Comp
        ref={ref}
        className={cn('@container grid min-w-0 overflow-hidden rounded-md bg-surface', className)}
        style={aspectStyle}
        {...props}
      >
        <div className="min-w-0">{children}</div>
      </Comp>
    )
  },
)

AspectRatio.displayName = 'AspectRatio'