seedpgp-web/src/components/ReadOnly.tsx

import { WifiOff } from 'lucide-react';

type ReadOnlyProps = {
  isReadOnly: boolean;
  onToggle: (isReadOnly: boolean) => void;
  buildHash: string;
  appVersion: string;
};

const CSP_POLICY = `default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'none';`;

export function ReadOnly({ isReadOnly, onToggle, buildHash, appVersion }: ReadOnlyProps) {
  return (
    <div className="pt-3 border-t border-[#00f0ff]/30">
      <label className="flex items-center gap-2 cursor-pointer group">
        <input
          type="checkbox"
          checked={isReadOnly}
          onChange={(e) => onToggle(e.target.checked)}
          className="rounded text-[#00f0ff] focus:ring-2 focus:ring-[#00f0ff] transition-all"
        />
        <span className="text-xs font-medium text-[#6ef3f7] group-hover:text-[#00f0ff] transition-colors">
          Read-only Mode
        </span>
      </label>
      {isReadOnly && (
        <div className="mt-4 p-3 bg-[#16213e] text-[#6ef3f7] rounded-lg text-xs space-y-2 animate-in fade-in border-2 border-[#00f0ff]/30">
          <p className="font-bold flex items-center gap-2"><WifiOff size={14} /> Network & Persistence Disabled</p>
          <div className="font-mono text-[10px] space-y-1">
            <p><span className="font-semibold text-[#9d84b7]">Version:</span> {appVersion}</p>
            <p><span className="font-semibold text-[#9d84b7]">Build:</span> {buildHash}</p>
            <p className="pt-1 font-semibold text-[#9d84b7]">Content Security Policy:</p>
            <p className="text-[#00f0ff] break-words">{CSP_POLICY}</p>
          </div>
        </div>
      )}
    </div>
  );
}