import { Box } from '@mui/material';
import { useTheme } from '@mui/material/styles';
import { SxProps, Theme } from '@mui/material';
import React from 'react';

interface ChatBubbleProps {
  isUser: boolean;
  isFullWidth?: boolean;
  children: React.ReactNode;
  sx?: SxProps<Theme>;
}

function ChatBubble({ isUser, isFullWidth, children, sx }: ChatBubbleProps) {
  const theme = useTheme();

  const userStyle = {
    backgroundColor: theme.palette.background.default, // Warm Gray (#D3CDBF)
    border: `1px solid ${theme.palette.custom.highlight}`, // Golden Ochre (#D4A017)
    borderRadius: '16px 16px 0 16px', // Rounded, flat bottom-right for user
    padding: theme.spacing(1, 2),
    maxWidth: isFullWidth ? '100%' : '70%',
    minWidth: '70%',
    alignSelf: 'flex-end', // Right-aligned for user
    color: theme.palette.primary.main, // Midnight Blue (#1A2536) for text
    '& > *': {
      color: 'inherit', // Children inherit Midnight Blue unless overridden
    },
  };

  const assistantStyle = {
    backgroundColor: theme.palette.primary.main, // Midnight Blue (#1A2536)
    border: `1px solid ${theme.palette.secondary.main}`, // Dusty Teal (#4A7A7D)
    borderRadius: '16px 16px 16px 0', // Rounded, flat bottom-left for assistant
    padding: theme.spacing(1, 2),
    maxWidth: isFullWidth ? '100%' : '70%',
    minWidth: '70%',
    alignSelf: 'flex-start', // Left-aligned for assistant
    color: theme.palette.primary.contrastText, // Warm Gray (#D3CDBF) for text
    '& > *': {
      color: 'inherit', // Children inherit Warm Gray unless overridden
    },
  };

  return (
    <Box sx={{ ...(isUser ? userStyle : assistantStyle), ...sx }}>
      {children}
    </Box>
  );
}

export type {
  ChatBubbleProps 
};

export {
  ChatBubble
};