import React from 'react'

import { handleAlign } from './Checkbox.helpers'

import { CheckboxProps, ContainerProps } from './Checkbox.types'

import Label from '../Label'

import './Checkbox.css'

const Checkbox = ({
  checked,
  className,
  label,

  onChange
}: CheckboxProps) => {
  return (
    <div className='w-full'>
      <Label text={label} />
      <span className='relative'>
        <input
          type='checkbox'
          checked={checked}
          onChange={e => onChange(e.target.checked)}
          className={className}
        />
      </span>
    </div>
  )
}

const Container = ({ align = 'right', children }: ContainerProps) => {
  const alignment = handleAlign(align)

  return (
    <div className={`${alignment} flex items-center space-x-2`}>{children}</div>
  )
}

Checkbox.Container = Container

export default Checkbox
