interface ExplorerRetryAlertProps {
  message: string
  onRetry?: () => void
  retryLabel?: string
  className?: string
}

export default function ExplorerRetryAlert({
  message,
  onRetry,
  retryLabel = 'Retry',
  className = '',
}: ExplorerRetryAlertProps) {
  return (
    <div
      role="alert"
      className={[
        'flex flex-col gap-3 rounded-xl border border-red-200 bg-red-50/70 px-4 py-3 dark:border-red-900/50 dark:bg-red-950/20 sm:flex-row sm:items-center sm:justify-between',
        className,
      ].join(' ')}
    >
      <p className="text-sm leading-6 text-red-900 dark:text-red-100">{message}</p>
      {onRetry ? (
        <button
          type="button"
          onClick={onRetry}
          className="shrink-0 rounded-lg border border-red-300 bg-white px-3 py-1.5 text-sm font-semibold text-red-800 transition-colors hover:bg-red-50 dark:border-red-800 dark:bg-red-950 dark:text-red-100 dark:hover:bg-red-900/40"
        >
          {retryLabel}
        </button>
      ) : null}
    </div>
  )
}