/**
 * JSX intrinsic-element declarations for the custom-element wrappers
 * shipped by `youtube-video-element`, `vimeo-video-element`,
 * `hls-video-element`.
 *
 * This is a real module (not an ambient `.d.ts`) so that it is reliably
 * pulled into the type graph when imported as a side effect. Ambient
 * `.d.ts` files are only loaded when they fall inside a project's
 * `include` — consumers (e.g. the Storybook tsconfig) only `include`
 * their own `stories/`, so a bare `.d.ts` here was silently skipped.
 *
 * media-chrome relies on `slot="media"` to attach a media element to
 * its `<MediaController>`. We declare the bare prop surface we use:
 * `src`, `slot`, `autoplay`, `muted`, `loop`, `playsinline`,
 * `crossorigin`, `preload`, `poster`. All three elements are
 * `HTMLElement` subclasses with `HTMLVideoElement`-shaped APIs, so
 * their JSX props are typed as a partial of `VideoHTMLAttributes`.
 */

import type { DetailedHTMLProps, HTMLAttributes, VideoHTMLAttributes } from 'react';

type VideoLikeElement = DetailedHTMLProps<
  VideoHTMLAttributes<HTMLElement> & HTMLAttributes<HTMLElement>,
  HTMLElement
>;

/**
 * `youtube-video-element` accepts a `config` property — an object merged
 * into the YouTube IFrame `playerVars` (JSON-serialized into a
 * `data-config` attribute internally). Used to suppress native chrome.
 */
type YouTubeVideoElement = VideoLikeElement & {
  config?: Record<string, string | number | boolean>;
};

declare module 'react' {
  // eslint-disable-next-line @typescript-eslint/no-namespace
  namespace JSX {
    interface IntrinsicElements {
      'youtube-video': YouTubeVideoElement;
      'vimeo-video': VideoLikeElement;
      'hls-video': VideoLikeElement;
    }
  }
}

export {};