import React from 'react';
import './checkbox.css'

type Props = {
    label: string,
    id:string,
    name:string,
    value: string,
    variant: 'default' |'primary' | 'secondary',
    size?: 'default' | 'small' | 'medium' | 'large',
    borderRadious?: 'small' | 'medium' | 'large',
    disable: boolean
}

const Checkbox = (props: Props) => {
   const {label, variant, size, disable, value, borderRadious} = props;
    return (
        <>
            <label className={`control control--checkbox checkbox-${variant} size-${size} ${borderRadious ? `rounded-${borderRadious}` : ''}`}>{label}
                <input value={value} disabled={disable} type="checkbox" name="checkbox" />
                <div className="control__indicator"></div>
            </label>
        </>
    )
}

export default Checkbox