seedpgp-web/src/components/QrDisplay.tsx

import { useEffect, useState } from 'react';
import { Download } from 'lucide-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: 'M',
                type: 'image/png',
                width: 512,
                margin: 4,
                color: {
                    dark: '#000000',
                    light: '#FFFFFF'
                }
            })
                .then(setDataUrl)
                .catch(console.error);
        }
    }, [value]);

    const handleDownload = () => {
        if (!dataUrl) return;

        // Generate filename: SeedPGP_YYYY-MM-DD_HHMMSS.png
        const now = new Date();
        const date = now.toISOString().split('T')[0]; // YYYY-MM-DD
        const time = now.toTimeString().split(' ')[0].replace(/:/g, ''); // HHMMSS
        const filename = `SeedPGP_${date}_${time}.png`;

        // Create download link
        const link = document.createElement('a');
        link.href = dataUrl;
        link.download = filename;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    };

    if (!dataUrl) return null;

    return (
        <div className="flex flex-col items-center gap-4">
            <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-80 h-80"
                />
            </div>

            <button
                onClick={handleDownload}
                className="inline-flex items-center gap-2 px-4 py-2.5 bg-gradient-to-r from-green-600 to-green-700 text-white rounded-lg font-semibold hover:from-green-700 hover:to-green-800 transition-all shadow-lg hover:shadow-xl"
            >
                <Download size={18} />
                Download QR Code
            </button>

            <p className="text-xs text-slate-500 text-center max-w-sm">
                Downloads as: SeedPGP_2026-01-28_231645.png
            </p>
        </div>
    );
};