import React from 'react';
import './CustomCheckbox.scss';

type CheckboxProps = {
    isLink?: boolean
    htmlFor?: string
    label?: any
    id?: string
    checked?: boolean
    required?:boolean
    theme?: 'default' | 'user-form-field'
    onChange: (s:string) => void
    hasError?: any
}

const CustomCheckbox =
    ({
         id,
         required=false,
         theme='default',
         checked=false,
         onChange,
         hasError=false,
         label, 
         isLink
     }: CheckboxProps) => {
    return (
        <>
            <div className="checkbox-terms--wrapper">
                <input
                    type="checkbox"
                    id={id}
                    required={required}
                    className={`checkbox ${theme} ${'disable'} ${hasError && 'hasError'}`}
                    onChange={(e)=>onChange(e.target.value)} />
                    {
                        isLink 
                        
                        ? 
                        
                        <label htmlFor={id}><a href='#' target='_blank'>{label}</a></label>

                        :

                        <label htmlFor={id}>{label}</label>
                    }


                {hasError && <p className={'error-message'}>{hasError}</p>}
            </div>
          </>
    );
}

export default CustomCheckbox;