---
import type { HTMLAttributes } from 'astro/types'
import type { CheckboxProps } from './checkbox'

import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro'

import check from '../../icons/check.svg?raw'

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

export type Props = CheckboxProps<HTMLAttributes<'input'>>

const {
    label,
    subText,
    color,
    className,
    ...rest
} = Astro.props

const classes = [
    styles.checkbox,
    label && subText && styles.col,
    className
]

const style = color
    ? `--w-checkbox-color: ${color};`
    : null
---

<label class:list={classes} style={style}>
    <ConditionalWrapper condition={!!(label && subText)}>
        <div class={styles.wrapper} slot="wrapper">
            children
        </div>
        <input
            {...rest}
            type="checkbox"
        />
        <span class={styles.check}>
            <Fragment set:html={check} />
        </span>
        {label && (
            <span class={styles.label}>
                <Fragment set:html={label} />
            </span>
        )}
    </ConditionalWrapper>
    {label && subText && (
        <span class={styles.text}>
            <Fragment set:html={subText} />
        </span>
    )}
</label>