import { View, ViewStyle } from "react-native";
import { useThemeStore } from "../stores/ThemeStore";

type BubbleSide = "left" | "right";

type ChatBubbleProps = {
  side: BubbleSide;
  children: React.ReactNode;
  className?: string;
  style?: ViewStyle;
};

export function ChatBubble({ side, children, className = "", style }: ChatBubbleProps) {
  const { theme } = useThemeStore();
  const borderColor = side === "left" ? theme.chatBot : theme.primeFg;
  const sideClass =
    side === "left"
      ? "self-start ml-2 rounded-bl-sm"
      : "self-end mr-2 rounded-br-sm";

  return (
    <View
      className={`border-2 border-solid rounded-xl my-2 ${sideClass} ${className}`}
      style={[{ borderColor, elevation: 8, backgroundColor: theme.secondaryBg }, style]}
    >
      {children}
    </View>
  );
}