import { cn } from "@/lib/utils";
import { tw } from "@/utils/tailwind";
import { cva, type VariantProps } from "class-variance-authority";
import { LoaderCircleIcon } from "lucide-react";

const bubbleVariants = cva(tw`px-4 py-2 rounded max-w-2/3`, {
  variants: {
    type: {
      question: tw`bg-blue-500 text-gray-200 self-start`,
      response: tw`bg-neutral-300 text-gray-950 self-end`,
    },
    active: {
      false: tw`grayscale-100 opacity-90`,
      true: null,
    },
  },
  defaultVariants: {
    active: true,
  },
});

interface Props extends VariantProps<typeof bubbleVariants> {
  content: string;
}
const ConversationBubble = ({ type, active, content }: Readonly<Props>) => {
  return (
    <div className={cn(bubbleVariants({ type, active }))}>
      {content ? content : <LoaderCircleIcon className="animate-spin" />}
    </div>
  );
};

export default ConversationBubble;