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;
  testID?: string;
};

export function ChatBubble({
  side,
  children,
  className = "",
  style,
  testID,
}: 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
      testID={testID}
      className={`border-2 border-solid rounded-xl my-2 ${sideClass} ${className}`}
      style={[
        { borderColor, elevation: 8, backgroundColor: theme.secondaryBg },
        style,
      ]}
    >
      {children}
    </View>
  );
}
