/**
 * Created by David Garcia for Finboot.
 * 
 * Custom SeletableTag component for Docusaurus.
 */

import clsx from 'clsx';
import React from 'react';

import { SelectableTagProps } from '../types';
import styles from './styles.module.css';

export default function SelectableTag(props:SelectableTagProps) {
      const {
        name,
        label,
        checked,
        onChange,
    } = props;

    return (
      <span className={clsx(styles.tag, 'tag')}>
        <input className={clsx(styles.tagInput, 'tagInput')} id={label} type="checkbox" name={name} value={label} checked={checked} onChange={onChange} />
        <label className={clsx(styles.tagLabel, 'tagLabel')} htmlFor={label}>
          {label}
        </label>
      </span>
      );
  }