import { useBreakpoint, Breakpoint } from './useBreakpoint';

const SIZES: Record<Breakpoint, { file: string; width: number; height: number }> = {
  mobile:  { file: 'banner-mobile-393x180.mp4',  width: 393,  height: 180 },
  tablet:  { file: 'banner-tablet-768x261.mp4',  width: 768,  height: 261 },
  desktop: { file: 'banner-desktop-1200x260.mp4', width: 1200, height: 260 },
};

interface PlusBannerProps {
  /** Base URL where mp4 files are served. Default: '/assets/banners' */
  basePath?: string;
  /** Additional CSS classes */
  className?: string;
}

/**
 * VSE AI · PLUS Banner
 *
 * Animated liquid-glass strip banner with dynamic glow.
 * Auto-selects mobile/tablet/desktop variant based on viewport.
 *
 * Usage:
 *   <PlusBanner />
 *   <PlusBanner basePath="/static/banners" />
 *
 * Requires:
 *   - banners.css imported (provides .plus-banner classes)
 *   - mp4 files in basePath (3 files, see SIZES above)
 */
export function PlusBanner({ basePath = '/assets/banners', className = '' }: PlusBannerProps) {
  const bp = useBreakpoint();
  const cfg = SIZES[bp];

  return (
    <video
      key={bp}
      className={`plus-banner plus-banner--${bp} ${className}`.trim()}
      src={`${basePath}/${cfg.file}`}
      width={cfg.width}
      height={cfg.height}
      muted
      loop
      autoPlay
      playsInline
      aria-hidden="true"
    />
  );
}
