frontend/src/components/Messages.tsx

import React from "react";
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
import { Card } from "@/components/ui/card";
import { useIsMobile } from "@/hooks/use-mobile";

interface MessageProps {
  content: string;
}

export const UserMessage: React.FC<MessageProps> = ({ content }) => {
  const isMobile = useIsMobile();

  return (
    <div className="flex justify-end mb-4">
      <div className="flex flex-col items-end">
        <Card className="bg-gradient-to-br from-white to-white/95 text-black p-3.5 rounded-2xl rounded-tr-sm max-w-[90%] sm:max-w-[80%] shadow-md border border-white/10 px-2 pr-6">
          <p className="text-sm md:text-base leading-relaxed px-2">{content}</p>
        </Card>
      </div>
      <Avatar
        className={`${
          isMobile ? "h-8 w-8" : "h-9 w-9"
        } ml-2 bg-white text-black shadow-[0_0_10px_rgba(255,255,255,0.2)] ring-2 ring-white/20`}
      >
        <AvatarImage
          src="https://images.unsplash.com/photo-1618160702438-9b02ab6515c9?auto=format&fit=crop&w=100&h=100"
          alt="User"
        />
        <AvatarFallback className="text-xs font-medium">You</AvatarFallback>
      </Avatar>
    </div>
  );
};

export const AIMessage: React.FC<MessageProps> = ({ content }) => {
  const isMobile = useIsMobile();

  return (
    <div className="flex mb-4">
      <Avatar
        className={`${
          isMobile ? "h-8 w-8" : "h-9 w-9"
        } mr-2 bg-gradient-to-br text-black from-purple-600/80 to-blue-600/80 border border-white/30 shadow-[0_0_10px_rgba(168,85,247,0.2)] ring-2 ring-white/10`}
      >
        <AvatarFallback className="text-xs font-medium">AI</AvatarFallback>
      </Avatar>
      <div className="flex flex-col">
        <Card className="bg-gradient-to-br from-gray-900/80 to-gray-800/80 text-white p-3.5 rounded-2xl rounded-tl-sm max-w-[90%] sm:max-w-[80%] shadow-md border border-white/10 backdrop-blur-sm px-2  pr-6">
          <p className="text-sm md:text-base leading-relaxed px-2">{content}</p>
        </Card>
      </div>
    </div>
  );
};