---

import { twMerge } from '@/utils/twMerge';

/**
 * Minimal frame component for wrapping documentation demos.
 *
 * Provides a styled container with rounded borders and background
 * matching the site's Tabs component aesthetic.
 *
 * Usage:
 * ```mdx
 * import Minimal from '@/components/frames/Minimal.astro';
 *
 * <MinimalFrame>
 *   <MyDemo client:idle />
 * </MinimalFrame>
 * ```
 */

type Props = {
  class?: string;
  margins?: 'default' | 'lg';
};

const { class: className, margins = 'default' } = Astro.props;

const marginClass = margins === 'lg' ? 'my-8' : 'my-4';
---

<div
  class={twMerge(
    "relative w-full max-w-3xl mx-auto flex rounded-xs overflow-hidden border border-faded-black dark:border-manila-dark",
    marginClass,
    className,
  )}
>
  <slot />
</div>