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