import clsx from 'clsx'
import React, { FC, ReactNode } from 'react'

import { theming } from '../../themes'
import { Button } from '../button'
import { useStyles } from './styles'

export type ChoiceType = { key: string; value: string }

export type ChoiceButtonProps = {
  className?: string
  selected?: boolean
  children: ReactNode
}

export const ChoiceButton: FC<ChoiceButtonProps> = ({ selected, className, children, ...props }) => {
  const { choiceButton, choiceButtonSelected } = useStyles({ theme: theming.useTheme() })

  return (
    <Button className={clsx(choiceButton, className, selected && choiceButtonSelected)} {...props}>
      {children}
    </Button>
  )
}
