import s from './checkbox.module.scss';
import { DetailedHTMLProps, InputHTMLAttributes } from 'react';

type CheckboxProps = {
  className?: string;
  label?: string;
  error?: string | boolean;
} & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;

export default function Checkbox({ ...props }: CheckboxProps) {
  const { label, error } = props;

  return (
    <div className={s.Container}>
      <input {...props} className={s.Input} type='checkbox' />
      <div className={!error ? s.Checkbox : s.CheckboxError} />
      <div className={!error ? s.Label : s.LabelError}>{label}</div>
    </div>
  );
}
