---
import type { HTMLAttributes } from 'astro/types'
import type { InputProps } from './input'

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

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

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

const {
    type = 'text',
    theme,
    label,
    subText,
    className,
    labelClassName,
    ...rest
} = Astro.props

const classes = [
    styles.input,
    theme && styles[theme],
    className
]

const labelClasses = [
    styles['input-label'],
    labelClassName
]

const useLabel = !!(label || subText || Astro.slots.has('default'))
---

<ConditionalWrapper condition={useLabel}>
    <label slot="wrapper" class:list={labelClasses}>
        {label && (
            <div class={styles.label} set:html={label} />
        )}
        <ConditionalWrapper condition={Astro.slots.has('default')}>
            <div class={styles.wrapper} slot="wrapper">
                children
            </div>
            <slot />
            children
        </ConditionalWrapper>
        {subText && (
            <div class={styles.subtext}>
                <Fragment set:html={subText} />
            </div>
        )}
    </label>
    <input
        {...rest}
        type={type}
        class:list={classes}
    />
</ConditionalWrapper>