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

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

export type RatingType = { key: string; value: number | string }

export type RatingButtonProps = {
  rating: RatingType
  selected?: boolean
  buttonClass?: string
  buttonTextClass?: string
  onClick: (rating: RatingType) => void
}

export const RatingButton: FC<RatingButtonProps> = ({ rating, onClick, selected, buttonClass, buttonTextClass }) => {
  const { ratingButton, ratingButtonSelected } = useStyles({ theme: theming.useTheme() })

  return (
    <button
      onClick={() => onClick(rating)}
      className={clsx(ratingButton, buttonClass, selected && ratingButtonSelected)}
    >
      <h2 className={clsx(buttonTextClass)}>{rating.value}</h2>
    </button>
  )
}
