import { IconButton } from '@mui/material'
import {
  ThumbUpOutlined,
  ThumbDownOutlined,
  ThumbUp,
  ThumbDown,
} from '@mui/icons-material'
import type { ChatRatingActionProps } from '../types'

export function ChatRatingAction({
  rating,
  onRatingChange,
  labels = {},
}: ChatRatingActionProps) {
  return (
    <>
      <IconButton
        size='small'
        onClick={() => onRatingChange?.(rating === 'up' ? null : 'up')}
        aria-label={labels.thumbUp ?? 'Thumbs up'}
        color={rating === 'up' ? 'primary' : undefined}
      >
        {rating === 'up' ? (
          <ThumbUp fontSize='small' />
        ) : (
          <ThumbUpOutlined fontSize='small' />
        )}
      </IconButton>
      <IconButton
        size='small'
        onClick={() => onRatingChange?.(rating === 'down' ? null : 'down')}
        aria-label={labels.thumbDown ?? 'Thumbs down'}
        color={rating === 'down' ? 'primary' : undefined}
      >
        {rating === 'down' ? (
          <ThumbDown fontSize='small' />
        ) : (
          <ThumbDownOutlined fontSize='small' />
        )}
      </IconButton>
    </>
  )
}