import { useCallback } from 'react';
import classnames from 'classnames';

import { Card, Icon } from '@servicetitan/design-system';

import * as Styles from './company-trade-checkbox.module.less';

export interface CompanyTradeCheckboxProps<TradesType extends string | number = string> {
    label?: JSX.Element | string;
    value?: TradesType;
    className?: string;
    active?: boolean;
    onClick?(item?: TradesType): void;
}

export function CompanyTradeCheckbox<T extends string | number = string>({
    label,
    value,
    className,
    active,
    onClick,
}: CompanyTradeCheckboxProps<T>) {
    const handleClick = useCallback(() => {
        if (onClick) {
            onClick(value);
        }
    }, [onClick, value]);

    return (
        <Card
            onClick={handleClick}
            active={active}
            className={classnames(Styles.card, className)}
            sharp
            thin
        >
            <Card.Section>
                {active && <Icon name="check_circle" className={Styles.checkbox} size={24} />}
                {label}
            </Card.Section>
        </Card>
    );
}