'use client';

import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';

/**
 * Exact geometric aspect ratio container for media.
 *
 * @description
 * Sets a responsive `16/9`, `1/1`, or custom ratio box relative to width,
 * preventing Cumulative Layout Shift (CLS) for images and videos.
 *
 * @ai-rules
 * 1. Set `ratio={16/9}` (or desired ratio) on the root element.
 * 2. Force child elements (e.g., `<img>` or `<video>`) to use `className="w-full h-full object-cover"`.
 */
function AspectRatio({ ...props }: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />;
}

export { AspectRatio };