import React from 'react';
import './CustomCheckbox.scss';
import plus from '../../../../assets/images/add_icon_month.svg'
import tick from '../../../../assets/images/tick.svg'


type CustomCheckboxMonthProps = {
    text: string
    checked: boolean
    disabled?: boolean
    disabledReason?: string
    onClick: () => void
}

const CustomCheckboxMonth = ({text, checked, disabled = false, disabledReason, onClick}: CustomCheckboxMonthProps) => {

    return (
        <div
            className={`custom-checkbox-month ${checked ? 'checked' : ''} ${disabled ? 'disabled' : ''}`}
            onClick={disabled ? undefined : onClick}
            title={disabled ? disabledReason : undefined}
        >
            {
                checked ?
                    <img src={tick} alt=""/>
                    : <img src={plus} alt=""/>
                    }
            <span className={'custom-checkbox-month--text'}>{text}</span>
        </div>
    );
}

export default CustomCheckboxMonth;