---
import type { HTMLAttributes } from 'astro/types'
import type { SwitchProps } from './switch'

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

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

export type Props = SwitchProps<HTMLAttributes<'textarea'>>

const {
    label,
    toggled,
    offColor,
    onColor,
    reverse,
    small,
    square,
    disabled,
    className,
    ...rest
} = Astro.props

const classes = [
    styles.switch,
    reverse && styles.reverse,
    small && styles.small,
    square && styles.square,
    disabled && styles.disabled,
    className
]

const styleVariables = classNames([
    offColor && `--w-switch-off-color: ${offColor};`,
    onColor && `--w-switch-on-color: ${onColor};`
])
---

<label class:list={classes} style={styleVariables}>
    <input
        {...rest}
        type="checkbox"
        checked={toggled}
    />
    <span class={styles.toggle}></span>
    {label && <span class={styles.label} set:html={label} />}
</label>