import React from 'react'

import * as DropdownMenu from '@radix-ui/react-dropdown-menu'

import CheckIcon from '~public/icons/Check.svg'
import './index.scss'

interface Props {
    checked?: boolean
    valueKey: string
    onCheckedChange: (open: boolean, key: string) => void
    children: React.ReactNode
}

const SearchFilterCheckboxItem = (props: Props) => {
    function handleCheckedChange(checked: boolean) {
        props.onCheckedChange(checked, props.valueKey)
    }

    return (
        <DropdownMenu.CheckboxItem 
            className="Item" 
            checked={props.checked || false}
            onCheckedChange={handleCheckedChange}
            onSelect={ (event) => event.preventDefault() }>
                <DropdownMenu.ItemIndicator className="Indicator">
                    <CheckIcon />
                </DropdownMenu.ItemIndicator>
                {props.children}
        </DropdownMenu.CheckboxItem>
    )
}

export default SearchFilterCheckboxItem
