import { Icon } from '@/Components/Icon'
import { FunctionComponent } from 'preact'
import { IconType } from '@standardnotes/snjs'

interface Props {
  iconType: IconType
  label: string
  selected: boolean
  onClick: () => void
}

export const MenuItem: FunctionComponent<Props> = ({ iconType, label, selected, onClick }) => (
  <div
    className={`preferences-menu-item select-none ${selected ? 'selected' : ''}`}
    onClick={(e) => {
      e.preventDefault()
      onClick()
    }}
  >
    <Icon className="icon" type={iconType} />
    <div className="min-w-1" />
    {label}
  </div>
)