import React from 'react'

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

import ArrowIcon from '~public/icons/Arrow.svg'
import './index.scss'

interface Props {
    label: string
    open: boolean
    numSelected: number
    onOpenChange: (open: boolean) => void
    children: React.ReactNode
}

const SearchFilter = (props: Props) => {
    return (
        <DropdownMenu.Root open={props.open} onOpenChange={props.onOpenChange}>
            <DropdownMenu.Trigger className="DropdownLabel">
                {props.label}
                <span className="count">{props.numSelected}</span>
                <span className="icon">
                    <ArrowIcon />
                </span>
            </DropdownMenu.Trigger>
            <DropdownMenu.Content className="Dropdown" sideOffset={4}>
                {props.children}
                <DropdownMenu.Arrow />
            </DropdownMenu.Content>
        </DropdownMenu.Root>
    )
}

export default SearchFilter
