import clsx from 'clsx'
import React, { ChangeEvent, FC } from 'react'

import { theming } from '../../themes'
import { useStyles } from './styles'

export type CheckboxProps = {
  className?: string
  checked: boolean
  onChange: (checked: boolean) => void
}

export const Checkbox: FC<CheckboxProps> = ({ className, checked, onChange }) => {
  const { checkboxContainer, checkboxCheckmark } = useStyles({ theme: theming.useTheme() })

  const eventHandler = (e: ChangeEvent<HTMLInputElement>) => {
    onChange(e.target.checked)
  }

  return (
    <label className={clsx(checkboxContainer, className)}>
      <input type="checkbox" checked={checked} onChange={eventHandler} readOnly />
      <span className={checkboxCheckmark} />
    </label>
  )
}
