'use client';

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

interface CheckinQRCodeProps {
  size?: number;
  className?: string;
}

export default function CheckinQRCode({ size = 200, className = '' }: CheckinQRCodeProps) {
  const [checkinUrl, setCheckinUrl] = useState('/checkin');

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

  return (
    <div className={`flex flex-col items-center gap-3 ${className}`}>
      <div className="bg-white p-3 rounded-xl shadow-xl">
        <QRCodeSVG value={checkinUrl} size={size} level="M" includeMargin={false} />
      </div>
      <p className="text-sm text-white/70 text-center">Scan to check in</p>
    </div>
  );
}