import styles from './spinner.module.css'
import { VariantProps } from 'class-variance-authority'

import { variants } from './variants'

export interface SpinnerProps extends VariantProps<typeof variants> {
  size?: number
}

export function Spinner({ type, size = 20 }: SpinnerProps) {
  const classNames = variants({
    type,
  })

  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      viewBox="0 0 20 21"
      fill="none"
      className={classNames}
    >
      <circle className={styles.dot} cx="10" cy="2.64147" r="1.73913" />
      <circle className={styles.dot} cx="16.087" cy="5.25018" r="1.73913" />
      <circle className={styles.dot} cx="18.2609" cy="10.9023" r="1.73913" />
      <circle className={styles.dot} cx="16.087" cy="16.5545" r="1.73913" />
      <circle className={styles.dot} cx="10" cy="19.1632" r="1.73913" />
      <circle className={styles.dot} cx="3.91304" cy="16.5545" r="1.73913" />
      <circle className={styles.dot} cx="1.73913" cy="10.9023" r="1.73913" />
      <circle className={styles.dot} cx="3.91304" cy="5.25018" r="1.73913" />
    </svg>
  )
}