import { Box } from '@mui/material'
import type { ChatLoaderProps } from '../types'
import { styles } from './styles'

export function ChatLoader({ size = 24, labels = {}, sx }: ChatLoaderProps) {
  return (
    <Box
      role='status'
      aria-busy={true}
      aria-label={labels.loading ?? 'Loading'}
      sx={{ ...styles.loader, width: size, height: size, ...sx }}
    >
      <Box
        component='span'
        sx={{
          ...styles.loaderOuterCircle,
          width: size * 0.75,
          height: size * 0.75,
        }}
      />
      <Box
        component='span'
        sx={{
          ...styles.loaderInnerCircle,
          width: size * 0.32,
          height: size * 0.32,
        }}
      />
    </Box>
  )
}