import styles from './Checkbox.module.css'
import { forwardRef, type InputHTMLAttributes, type ReactNode } from 'react'

interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
  label?: ReactNode
  id?: string
}

export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
  ({ label, id, className, ...rest }, ref) => {
    const inputId = id ?? `checkbox-${Math.random().toString(36).slice(2)}`
    return (
      <label className={`${styles.wrapper} ${className ?? ''}`} htmlFor={inputId}>
        <input
          ref={ref}
          id={inputId}
          type="checkbox"
          className={styles.input}
          {...rest}
        />
        <span className={styles.box} aria-hidden="true" />
        {label && <span className={styles.label}>{label}</span>}
      </label>
    )
  },
)

Checkbox.displayName = 'Checkbox'
