interface ConflictNotificationProps {
  onReload: () => void;
  onForceOverwrite: () => void;
  onDismiss: () => void;
}

export function ConflictNotification({
  onReload,
  onForceOverwrite,
  onDismiss,
}: ConflictNotificationProps) {
  return (
    <div className="fixed bottom-4 right-4 max-w-md p-4 bg-[#1a2332] border border-yellow-500/50 shadow-lg z-50">
      <div className="flex items-start gap-3">
        <div className="text-yellow-500 text-xl font-bold">!</div>
        <div className="flex-1">
          <h3 className="font-mono text-sm text-[#9bc3ff] font-semibold mb-1">
            Conflict Detected
          </h3>
          <p className="font-mono text-xs text-white/70 mb-3">
            This file was modified elsewhere. Your changes could not be saved.
          </p>
          <div className="flex gap-2">
            <button
              onClick={onReload}
              className="px-3 py-1 font-mono text-xs text-[#9bc3ff] border border-[rgba(117,170,252,0.25)] hover:border-[#3f6fb3] transition-colors"
            >
              Reload Latest
            </button>
            <button
              onClick={onForceOverwrite}
              className="px-3 py-1 font-mono text-xs text-red-400 border border-red-400/25 hover:border-red-400/50 transition-colors"
            >
              Force Save
            </button>
            <button
              onClick={onDismiss}
              className="px-3 py-1 font-mono text-xs text-[#555] hover:text-white/70 transition-colors"
            >
              Dismiss
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}