---
import type { SpinnerProps } from './spinner'

import { classNames } from '../../utils/classNames'

import styles from './spinner.module.scss'

interface Props extends SpinnerProps {}

const {
    color,
    width,
    speed,
    size,
    dashArray
} = Astro.props

const classes = [
    styles.spinner,
    dashArray && styles.dashed
]

const styleVariables = classNames([
    color && `--w-spinner-color: ${color};`,
    width && `--w-spinner-width: ${width}px;`,
    speed && `--w-spinner-speed: ${speed}s;`,
    size && `--w-spinner-size: ${size}px;`,
    dashArray && `--w-spinner-dash: ${dashArray}`
])
---

<svg
    class:list={classes}
    viewBox="25 25 50 50"
    role="status"
    style={styleVariables}
>
    <circle
        class={styles.path}
        cx="50"
        cy="50"
        r="20"
        fill="none"
    />
</svg>