import { useState } from 'react';
import { Dialog } from '../Dialog/Dialog';

type BackendStatus = 'checking' | 'unavailable';

interface BackendConnectionDialogProps {
  backendStatus: BackendStatus;
  message: string;
}

export function BackendConnectionDialog({ backendStatus, message }: BackendConnectionDialogProps) {
  const [open, setOpen] = useState(true);

  if (!open) return null;

  const title = backendStatus === 'checking'
    ? 'Checking server connection'
    : 'Backend is unreachable';

  return <Dialog title={title} onClose={() => setOpen(false)} className="backend-connection-dialog">
    <div className="backend-connection-dialog__content" role="status" aria-live="polite">
      <div className="backend-connection-dialog__icon" aria-hidden="true">!</div>
      <div>
        <p>{message}</p>
        <p className="backend-connection-dialog__hint">The connection is checked automatically.</p>
      </div>
    </div>
  </Dialog>;
}