import * as React from 'react'

import { cn } from './utils'

type SpinnerSize = 'sm' | 'md' | 'lg'

interface SpinnerProps extends React.ComponentProps<'span'> {
  /** Size of the spinner */
  size?: SpinnerSize
}

const sizeClasses: Record<SpinnerSize, string> = {
  sm: 'h-4 w-4 border-2',
  md: 'h-6 w-6 border-2',
  lg: 'h-8 w-8 border-[3px]',
}

function Spinner({ className, size = 'md', ...props }: SpinnerProps) {
  return (
    <span
      data-slot="spinner"
      role="status"
      className={cn('inline-flex items-center justify-center', className)}
      {...props}
    >
      <span
        className={cn(
          'border-primary/30 border-t-primary animate-spin rounded-full',
          sizeClasses[size]
        )}
        aria-hidden="true"
      />
      <span className="sr-only">Loading...</span>
    </span>
  )
}

export { Spinner }
export type { SpinnerProps, SpinnerSize }
