import { useEffect, useState } from 'react';
import QRCode from 'qrcode';

interface QrDisplayProps {
    value: string;
}

export const QrDisplay: React.FC<QrDisplayProps> = ({ value }) => {
    const [dataUrl, setDataUrl] = useState<string>('');

    useEffect(() => {
        if (value) {
            QRCode.toDataURL(value, {
                errorCorrectionLevel: 'Q',
                type: 'image/png',
                width: 512,
                margin: 2,
            })
                .then(setDataUrl)
                .catch(console.error);
        }
    }, [value]);

    if (!dataUrl) return null;

    return (
        <div className="flex items-center justify-center p-4 bg-white rounded-xl border-2 border-slate-200">
            <img src={dataUrl} alt="SeedPGP QR Code" className="w-64 h-64" />
        </div>
    );
};