export default function DevModeToggle({ enabled, onToggle }) {
  return (
    <div className="flex items-center gap-3">
      <span className={`text-sm font-medium ${enabled ? 'text-amber-400' : 'text-slate-400'}`}>
        Dev Mode
      </span>
      <button
        onClick={onToggle}
        className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-slate-800 ${
          enabled
            ? 'bg-amber-500 focus:ring-amber-500'
            : 'bg-slate-600 focus:ring-slate-500'
        }`}
      >
        <span
          className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
            enabled ? 'translate-x-6' : 'translate-x-1'
          }`}
        />
      </button>
      {enabled && (
        <span className="text-xs text-amber-400 bg-amber-900/30 px-2 py-1 rounded">
          Commands require approval
        </span>
      )}
    </div>
  );
}