import { ReactNode } from 'react'
import { useTranslation } from '@/i18n'
import './loading-spinner.css'

interface LoadingSpinnerProps {
  message?: string | undefined
  ariaLabel?: string | undefined
}

/**
 * A ring spinner with a message. Defaults come from the i18n bundle so a
 * bare `<LoadingSpinner />` reads correctly in either language; callers
 * with a more specific message ("Laddar kalender…") pass it in.
 */
export function LoadingSpinner({ message, ariaLabel }: LoadingSpinnerProps): ReactNode {
  const { t } = useTranslation()
  return (
    <div
      className="loading-spinner"
      role="status"
      aria-label={ariaLabel ?? t('common.loading')}
      aria-busy={true}
      data-testid="loading-spinner"
    >
      <div className="loading-spinner__icon" data-testid="spinner-icon" role="presentation" />
      <p className="loading-spinner__message" data-testid="spinner-message">
        {message ?? t('common.loadingEllipsis')}
      </p>
    </div>
  )
}