import { VariantProps } from 'class-variance-authority'

import { variants } from './variants'
import { ProgressBar } from 'react-aria-components'

export interface LoadingProps extends VariantProps<typeof variants> {
  ariaLabel?: string
  size?: number
}

export function Loading({
  ariaLabel = 'Loading',
  size = 20,
  type,
}: LoadingProps) {
  const classNames = variants({
    type,
  })

  return (
    <ProgressBar aria-label={ariaLabel} isIndeterminate className={classNames}>
      <svg
        className={classNames}
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        height={size}
        viewBox="0 0 20 20"
        width={size}
      >
        <circle cx="50%" cy="8.6955%" r="8.6955%" />
        <circle cx="80.435%" cy="21.73915%" r="8.6955%" />
        <circle cx="91.3045%" cy="50%" r="8.6955%" />
        <circle cx="80.435%" cy="78.261%" r="8.6955%" />
        <circle cx="50%" cy="91.3045%" r="8.6955%" />
        <circle cx="19.5652%" cy="78.261%" r="8.6955%" />
        <circle cx="8.6955%" cy="50%" r="8.6955%" />
        <circle cx="19.5652%" cy="21.73915%" r="8.6955%" />
      </svg>
    </ProgressBar>
  )
}