import * as React from 'react'

import { cn } from './utils'

export interface AspectRatioProps extends React.ComponentProps<'div'> {
  /** The desired width-to-height ratio (e.g. 16/9, 4/3, 1) */
  ratio?: number
}

function AspectRatio({ className, ratio = 1, style, children, ...props }: AspectRatioProps) {
  return (
    <div
      data-slot="aspect-ratio"
      className={cn('relative w-full', className)}
      style={{ paddingBottom: `${(1 / ratio) * 100}%`, ...style }}
      {...props}
    >
      <div className="absolute inset-0">{children}</div>
    </div>
  )
}

export { AspectRatio }
