import type { HTMLAttributes, PropsWithChildren } from "react";
import { cn } from "../../lib/cn";

export type AspectRatioProps = PropsWithChildren<
  HTMLAttributes<HTMLDivElement> & {
    ratio?: number | string;
  }
>;

export function AspectRatio({ children, className, ratio = 16 / 9, style, ...props }: AspectRatioProps) {
  return (
    <div className={cn("relative w-full", className)} style={{ aspectRatio: ratio, ...style }} {...props}>
      {children}
    </div>
  );
}