import { ButtonBase, Typography } from '@mui/material'
import { ArrowUpward } from '@mui/icons-material'
import type { ChatSuggestionButtonProps } from '../types'
import { styles } from './styles'

export function ChatSuggestionButton({
  label,
  color,
  sx,
  ...props
}: ChatSuggestionButtonProps) {
  return (
    <ButtonBase
      sx={{
        ...styles.suggestionButton,
        ...(color ? { backgroundColor: color } : undefined),
        ...sx,
      }}
      {...props}
    >
      <Typography color='inherit' variant='body2'>
        {label}
      </Typography>
      <ArrowUpward />
    </ButtonBase>
  )
}