import type { WidgetTranslations } from '../i18n';

interface ErrorViewProps {
  message: string;
  canRetry: boolean;
  onUseAnotherPhoto: () => void;
  onRetry: () => void;
  onClose: () => void;
  t: WidgetTranslations['error'];
}

export function ErrorView({ message, canRetry, onUseAnotherPhoto, onRetry, onClose, t }: ErrorViewProps) {
  return (
    <div className="aisthetix-error">
      <div className="aisthetix-error-icon">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
        >
          <circle cx="12" cy="12" r="10" />
          <line x1="12" y1="8" x2="12" y2="12" />
          <line x1="12" y1="16" x2="12.01" y2="16" />
        </svg>
      </div>

      <h3>{t.title}</h3>
      <p className="aisthetix-error-message">{message}</p>

      <div className="aisthetix-error-suggestions">
        <p>{t.suggestions}</p>
        <ul>
          <li>{t.tip1}</li>
          <li>{t.tip2}</li>
          <li>{t.tip3}</li>
        </ul>
      </div>

      <div className="aisthetix-error-actions">
        {canRetry && <button
          type="button"
          onClick={onRetry}
          className="aisthetix-btn aisthetix-btn-primary"
        >
          {t.tryAgain}
        </button>}
        <button type="button" onClick={onUseAnotherPhoto}
          className={`aisthetix-btn aisthetix-btn-${canRetry ? 'secondary' : 'primary'}`}>
          {t.useAnotherPhoto}
        </button>
        <button
          type="button"
          onClick={onClose}
          className="aisthetix-btn aisthetix-btn-text"
        >
          {t.close}
        </button>
      </div>
    </div>
  );
}