'use client';

import { cn } from '@/lib/cn';
import { useTvEnv } from '../context';

/** The room's server-rendered QR code in a white quiet-zone tile, at a fixed stage size. */
export function JoinQr({ size, className }: { size: number; className?: string }) {
  const { qr } = useTvEnv();
  return (
    <div
      className={cn('shrink-0 overflow-hidden rounded-[22px] bg-white p-[3%] shadow-[0_0_0_6px_rgb(124_92_255/0.35),0_30px_80px_-30px_rgb(34_211_238/0.6)]', className)}
      style={{ width: size, height: size }}
    >
      {qr}
    </div>
  );
}

/** Small "scan to join" corner card for question screens while late join is open. */
export function CornerJoin({ className }: { className?: string }) {
  const { joinCode } = useTvEnv();
  return (
    <div className={cn('flex flex-col items-center gap-[10px] rounded-[24px] border border-line bg-surface/85 p-[16px] shadow-card', className)}>
      <JoinQr size={168} className="rounded-[14px] shadow-none" />
      <p className="text-center text-[20px] leading-tight font-semibold text-muted">
        Join now
        <span className="block font-display text-[22px] font-bold text-amber">{joinCode}</span>
      </p>
    </div>
  );
}