ayos / web / src / components / mascot / SpeechBubble.tsx

import { keyframes } from '@emotion/react';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import { Rambi, type Mood } from './Rambi';

const fadeIn = keyframes`
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
`;

interface SpeechBubbleProps {
  mood?: Mood;
  size?: number;
  message: string;
}

export function SpeechBubble({ mood = 'idle', size = 80, message }: SpeechBubbleProps) {
  return (
    <Box
      sx={{
        display: 'flex',
        alignItems: 'flex-end',
        gap: 1.5,
      }}
    >
      <Rambi mood={mood} size={size} />
      <Box
        sx={{
          position: 'relative',
          bgcolor: 'rgba(255,255,255,0.95)',
          borderRadius: 3,
          px: 2,
          py: 1,
          maxWidth: 220,
          animation: `${fadeIn} 0.4s ease-out`,
          boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
          // Speech bubble tail
          '&::before': {
            content: '""',
            position: 'absolute',
            left: -6,
            bottom: 12,
            width: 0,
            height: 0,
            borderTop: '6px solid transparent',
            borderBottom: '6px solid transparent',
            borderRight: '8px solid rgba(255,255,255,0.95)',
          },
        }}
      >
        <Typography
          variant="body2"
          sx={{ fontWeight: 600, color: '#333', lineHeight: 1.3 }}
        >
          {message}
        </Typography>
      </Box>
    </Box>
  );
}