/**
 * @module components/CheckboxFacet
 */
import { useCallback } from 'react';
import Button from 'components/Button';
import Text from 'components/Text';
import Icon from 'components/Icon';
import styles from 'components/common/Checkbox/styles.css';
import cx from 'classnames';
export default ({ item, theme = styles, style, onItemClick, content, config, isMobile, }) => {
    const onClick = useCallback((evt) => {
        item.toggle(evt);
        onItemClick && onItemClick(evt);
    }, [item, onItemClick]);
    const isSelected = item.get('selected');
    return (<Button style={style} role="checkbox" aria-checked={isSelected ? 'true' : 'false'} tabIndex={0} onClick={onClick} className={cx(theme.item, isMobile && theme.mobile)}>
      <Icon className={theme.icon} name={isSelected ? 'CheckboxFilled' : 'CheckboxEmpty'} title={isSelected ? 'Selected' : 'Not selected'}/>
      <Text primary lowercase className={theme.content} bold={isSelected}>
        {content({ item, config })}
      </Text>
      <Text secondary uppercase>
        ({item.get('count')})
      </Text>
    </Button>);
};