import React from 'react';

export const SecurityWarnings: React.FC = () => {
    return (
        <div className="space-y-3">
            <Warning
                icon="🧵"
                title="JavaScript Strings are Immutable"
                description="Strings cannot be overwritten in memory. Copies persist until garbage collection runs (timing unpredictable)."
            />

            <Warning
                icon="🗑️"
                title="No Guaranteed Memory Wiping"
                description="JavaScript has no secure memory clearing. Sensitive data may linger in RAM until GC or browser restart."
            />

            <Warning
                icon="📋"
                title="Clipboard Exposure"
                description="Copied data is accessible to other tabs/apps. Browser extensions can read clipboard contents."
            />

            <Warning
                icon="💾"
                title="Browser Storage Persistence"
                description="localStorage survives browser restart. sessionStorage survives page refresh. Both readable by any script on this domain."
            />

            <Warning
                icon="🔍"
                title="DevTools Access"
                description="All app state, memory, and storage visible in browser DevTools. Never use on untrusted devices."
            />

            <Warning
                icon="🌐"
                title="Network Risks (When Online)"
                description="If hosted online: DNS, HTTPS, CDN, and browser can see usage patterns. Use offline/local for maximum security."
            />

            <div className="pt-3 border-t border-[#00f0ff]/30 text-xs text-[#6ef3f7]">
                <strong className="text-[#00f0ff]">Recommendation:</strong>{' '}
                Use this tool on a dedicated offline device. Clear browser data after each use. Never use on shared/public computers.
            </div>
        </div>
    );
};

const Warning = ({
    icon,
    title,
    description,
}: {
    icon: string;
    title: string;
    description: string;
}) => (
    <div className="flex gap-2 text-sm">
        <span className="text-lg flex-shrink-0">{icon}</span>
        <div>
            <div className="font-semibold text-[#00f0ff] mb-1" style={{ textShadow: '0 0 10px rgba(0,240,255,0.7)' }}>{title}</div>
            <div className="text-[#6ef3f7] leading-relaxed">{description}</div>
        </div>
    </div>
);