interface Props {
  title?: string;
  message: string;
  onRetry: () => void;
}

export default function ErrorState({ title = 'Ein Fehler ist aufgetreten', message, onRetry }: Props) {
  return (
    <div className="text-center py-16 px-4" role="alert">
      <div className="inline-flex items-center justify-center w-16 h-16 rounded-full mb-4" style={{ background: 'var(--color-error-bg)', color: 'var(--color-error)' }}>
        <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
      </div>
      <h3 className="text-xl font-semibold mb-2" style={{ color: 'var(--text)' }}>{title}</h3>
      <p className="max-w-md mx-auto mb-6" style={{ color: 'var(--secondary)' }}>{message}</p>
      <button onClick={onRetry} className="hms-btn hms-btn-primary">Erneut versuchen</button>
    </div>
  );
}
