import { useBreakpoint } from './useBreakpoint';

export type Locale = 'ru' | 'en';

interface ReleaseNotesBannerProps {
  /** Locale of release-notes content. Default: 'ru' */
  locale?: Locale;
  /** Base URL where HTML files are served. Default: '/assets/banners' */
  basePath?: string;
  /** Additional CSS classes */
  className?: string;
  /** Accessible title for iframe */
  title?: string;
}

/**
 * VSE AI · Release Notes Banner
 *
 * "What's new" info-banner. HTML+CSS standalone, embedded via iframe.
 * Auto-selects mobile/tablet/desktop variant based on viewport.
 * Supports RU and EN locales (separate HTML files).
 *
 * Usage:
 *   <ReleaseNotesBanner />
 *   <ReleaseNotesBanner locale="en" />
 *
 * Requires:
 *   - banners.css imported (provides .release-banner classes)
 *   - 6 HTML files in basePath (3 sizes × 2 locales)
 *
 * Files:
 *   release-notes-mobile.html / -tablet.html / -desktop.html  (RU)
 *   release-notes-mobile-en.html / -tablet-en.html / -desktop-en.html
 *
 * NOTE: текст release-notes (Версия / What's new / список фич) сейчас
 *   зашит в HTML. Если нужна параметризация (props version/title/features) —
 *   попроси template-version у дизайн-команды.
 */
export function ReleaseNotesBanner({
  locale = 'ru',
  basePath = '/assets/banners',
  className = '',
  title = 'Release notes',
}: ReleaseNotesBannerProps) {
  const bp = useBreakpoint();
  const suffix = locale === 'en' ? '-en' : '';
  const src = `${basePath}/release-notes-${bp}${suffix}.html`;

  return (
    <iframe
      key={`${bp}-${locale}`}
      className={`release-banner release-banner--${bp} ${className}`.trim()}
      src={src}
      title={title}
      loading="lazy"
    />
  );
}
