import { Box, IconButton, Typography } from '@mui/material'
import { Close } from '@mui/icons-material'
import type { ChatHeaderProps } from '../types'
import { styles } from './styles'

export function ChatHeader({
  leftSlot,
  title,
  rightSlot,
  onClose,
  sx,
}: ChatHeaderProps) {
  return (
    <Box sx={{ ...styles.header, ...sx }}>
      {leftSlot}
      <Typography variant='subtitle2' sx={styles.headerTitle}>
        {title}
      </Typography>
      <Box sx={styles.headerActions}>
        {rightSlot}
        {onClose && (
          <IconButton size='medium' onClick={onClose} aria-label='Close'>
            <Close />
          </IconButton>
        )}
      </Box>
    </Box>
  )
}