import type { FC } from 'react'

type LoadingSpinnerProps = {
  size?: number | string
  className?: string
  title?: string
}

export const LoadingSpinner: FC<LoadingSpinnerProps> = ({
  size = 16,
  className,
  title = 'Loading',
}) => {
  const resolvedSize = typeof size === 'number' ? `${size}px` : size
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={resolvedSize}
      height={resolvedSize}
      viewBox="0 0 16 16"
      fill="none"
      role="status"
      aria-live="polite"
      aria-busy="true"
      className={['animate-spin', className].filter(Boolean).join(' ')}
      style={{ animationDuration: '1.2s' }}
    >
      {title ? <title>{title}</title> : null}
      <path
        stroke="currentColor"
        strokeWidth="1.5"
        d="M8 0v4m0 8v4m5.657-13.657-2.829 2.829m-5.656 5.657-2.829 2.828M16 8h-4M4 8H0m13.657 5.657-2.829-2.829M5.172 5.173l-2.829-2.83"
      />
    </svg>
  )
}

LoadingSpinner.displayName = 'LoadingSpinner'