import { cn } from "#lib/utils.ts";
import { aspectRatio as styles } from "./classes.ts";

export interface Input extends Marko.Input<"div"> {
  /** Width-to-height ratio to constrain the content to, e.g. `16 / 9`. Defaults to `1`. */
  ratio?: number;
}

<const/{ ratio = 1, class: className, content, ...rest }=input/>

<div ...rest data-slot="aspect-ratio" class=cn(styles.root, className) style={ "aspect-ratio": String(ratio) }>
  <div class=styles.inner>
    <${content}/>
  </div>
</div>