/**
 * Presentational wrapper for one quad pane: frame border, top-left label chip,
 * optional bottom-left info chip (timecode), and double-click-to-expand. Holds no
 * playback logic — the media element is passed in as `children`.
 *
 * VTK-free.
 */
import type { QuadIndex } from './types';

// Inline class join — this package stays dependency-free beyond react, so it does
// NOT import `cn` from the @ump/shared barrel.
function join(...parts: Array<string | false | null | undefined>): string {
  return parts.filter(Boolean).join(' ');
}

export interface VideoQuadProps {
  index: QuadIndex;
  label: string;
  info?: string;
  expanded: boolean;
  onToggleExpand: (i: QuadIndex) => void;
  children: React.ReactNode;
  className?: string;
}

export function VideoQuad({
  index,
  label,
  info,
  expanded,
  onToggleExpand,
  children,
  className,
}: VideoQuadProps) {
  return (
    <div
      className={join(
        'relative overflow-hidden border-2 border-border rounded-md box-border bg-black',
        expanded && 'ring-1 ring-primary/40',
        className,
      )}
      onDoubleClick={() => onToggleExpand(index)}
    >
      {children}

      <div className="absolute top-2 left-2 text-[11px] uppercase tracking-wide text-white/90 pointer-events-none drop-shadow z-10">
        {label}
      </div>

      {info && (
        <div className="absolute bottom-2 left-2 text-[11px] font-mono text-white/90 pointer-events-none drop-shadow z-10">
          {info}
        </div>
      )}
    </div>
  );
}
