import React, { FC } from 'react';

import css from './index.module.css';
import Link, { LinkProps } from '../Link';

export interface CheckboxProps {
  label?: string;
  name?: string;
  required?: boolean;
  value?: boolean;
  onChange?: (e) => void;
  onBlur?: (e) => void;
  link?: LinkProps;
}

const Checkbox: FC<CheckboxProps> = ({
  label,
  required,
  name,
  value,
  onChange,
  onBlur,
  link,
}) => (
  <div data-testid="Checkbox" className={css.checkbox}>
    <label className={css.checkbox__label}>
      <input
        onBlur={onBlur}
        name={name}
        required={required}
        type="checkbox"
        aria-label={label}
        className={css.checkbox__input}
        checked={value}
        onChange={onChange}
      />
      <span className={css.checkbox__enhanced}></span>
      {label}
      {link && <Link {...link} />}
    </label>
  </div>
);

export default Checkbox;