'use client';

import { QRCodeSVG } from 'qrcode.react';
import { useParams } from 'next/navigation';

export default function JoinPage() {
  const params = useParams();
  const code = params.code as string;
  const joinUrl = `https://hatch.surf/join/${code}`;

  return (
    <div className="min-h-screen bg-zinc-950 flex flex-col items-center justify-center px-6 py-12">
      {/* Main content */}
      <div className="max-w-md w-full text-center">
        {/* Bilingual welcome phrase */}
        <div className="mb-12">
          <h1 className="text-3xl md:text-4xl font-bold text-white mb-4 leading-tight">
            Арга хэмжээнд тавтай морилно уу
          </h1>
          <p className="text-lg text-zinc-400 font-medium">
            Welcome to the event
          </p>
        </div>

        {/* QR Code section */}
        <div className="mb-12">
          <div className="inline-block p-6 bg-white rounded-2xl shadow-2xl">
            <QRCodeSVG 
              value={joinUrl}
              size={200}
              bgColor="#ffffff"
              fgColor="#09090b"
              level="H"
              includeMargin={false}
            />
          </div>
        </div>

        {/* Event info */}
        <div className="mb-8">
          <div className="inline-block px-4 py-2 rounded-full bg-zinc-800/50 border border-zinc-700/50 text-zinc-300 text-sm font-mono">
            Code: {code}
          </div>
        </div>

        {/* Instructions */}
        <div className="space-y-4 text-zinc-400 text-sm">
          <p className="leading-relaxed">
            Scan the QR code above to join this event space.
          </p>
          <p className="leading-relaxed">
            You'll be able to see live HTTP requests and interact with the event.
          </p>
        </div>

        {/* Footer */}
        <div className="mt-16 pt-8 border-t border-zinc-800/50">
          <p className="text-xs text-zinc-600">
            Powered by Hatch · Self-hostable HTTP request inspector
          </p>
        </div>
      </div>
    </div>
  );
}