---
/**
 * Conditionally shows content based on the user's selected style preference.
 *
 * When `styles` is provided: Content is wrapped in a div with `data-for-style`
 * attribute. CSS rules in StyleInit.astro control visibility based on `html[data-style]`.
 *
 * When `styles` is omitted: Content is rendered directly without any wrapper,
 * making it visible regardless of style preference.
 *
 * @example
 * <!-- Show only for CSS style -->
 * <StyleCase styles={['css']}>CSS-specific content</StyleCase>
 *
 * <!-- Show for multiple styles -->
 * <StyleCase styles={['css', 'tailwind']}>Shared content</StyleCase>
 *
 * <!-- Always visible (no styles prop) -->
 * <StyleCase>Universal content</StyleCase>
 */
import type { AnySupportedStyle } from '@/types/docs';

interface Props {
  styles?: AnySupportedStyle[];
}

const { styles } = Astro.props;
---

{
  !styles ? (
    <slot />
  ) : (
    <div class="contents" data-for-style={styles.join(" ")}>
      <slot />
    </div>
  )
}
