// node modules
import React, {FC} from "react";

// local components
import { SelectButton } from "../select_button";

// local files
import checkIcon from '../../../assets/check_icon.svg'
import { theming } from "../../../theme";
import { useStyles } from "./styles";

export interface CheckButtonProps {
    label: string;
    className?: string;
    selected?: boolean;
    loading?: boolean;
    disabled?: boolean;
    centered?: boolean;
    children?: any;
    onClick?: () => any;
}

export const CheckButton: FC<CheckButtonProps> = ({
    label = '',
    className = '',
    selected = false,
    centered= false,
    children,
    ...otherProps
}) => {
    const { root, checkWrapper, checkIconCl, childrenStyle, centeredChildren } = useStyles({ theme: theming.useTheme() });
    const checkBtnClass = `${root} ${className}`

    return (
        <SelectButton centered={centered} selected={selected} label={''} className={checkBtnClass} {...otherProps}>
            <div className={`${childrenStyle} ${centered ? centeredChildren : ''}`}>{children || label}</div>
            <div className={checkWrapper}>
                { selected && <img className={checkIconCl} src={checkIcon} alt="" />}
            </div>
        </SelectButton>
    )
};