'use client';

import { QRCodeSVG } from 'qrcode.react';
import { useEffect, useState } from 'react';

interface LiveQRCodeProps {
  size?: number;
  className?: string;
  label?: string;
}

export default function LiveQRCode({ size = 120, className = '', label = 'Live View' }: LiveQRCodeProps) {
  const [liveUrl, setLiveUrl] = useState('/live');

  useEffect(() => {
    if (typeof window !== 'undefined') {
      setLiveUrl(`${window.location.origin}/live`);
    }
  }, []);

  return (
    <div className={`flex flex-col items-center gap-2 ${className}`}>
      <div className="bg-white p-2 rounded-lg shadow-lg">
        <QRCodeSVG value={liveUrl} size={size} level="M" includeMargin={false} />
      </div>
      {label && (
        <span className="text-xs text-white/60 font-medium tracking-wide uppercase">{label}</span>
      )}
    </div>
  );
}