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-slate-300">
      <label className="flex items-center gap-2 cursor-pointer group">
        <input
          type="checkbox"
          checked={isReadOnly}
          onChange={(e) => onToggle(e.target.checked)}
          className="rounded text-blue-600 focus:ring-2 focus:ring-blue-500 transition-all"
        />
        <span className="text-xs font-medium text-slate-700 group-hover:text-slate-900 transition-colors">
          Read-only Mode
        </span>
      </label>
      {isReadOnly && (
        <div className="mt-4 p-3 bg-slate-800 text-slate-200 rounded-lg text-xs space-y-2 animate-in fade-in">
          <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-slate-400">Version:</span> {appVersion}</p>
            <p><span className="font-semibold text-slate-400">Build:</span> {buildHash}</p>
            <p className="pt-1 font-semibold text-slate-400">Content Security Policy:</p>
            <p className="text-sky-300 break-words">{CSP_POLICY}</p>
          </div>
        </div>
      )}
    </div>
  );
}