import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import type { Message } from '@/lib/types';
import { cn } from '@/lib/utils';
import { CheckCheck } from 'lucide-react';

interface MessageBubbleProps {
    message: Message;
    isOwn?: boolean;
    showAvatar?: boolean;
}

export function MessageBubble({ message, isOwn, showAvatar }: MessageBubbleProps) {
    return (
        <div className={cn('mb-4 flex gap-3', isOwn && 'justify-end')}>
            {!isOwn && showAvatar && (
                <Avatar className="h-10 w-10">
                    <AvatarImage src={`assets/chat/${message.senderName}.jpg?height=40&width=40&query=${message.senderName}`} />
                    <AvatarFallback className="bg-orange-200 text-orange-700">{message.senderName.slice(0, 2).toUpperCase()}</AvatarFallback>
                </Avatar>
            )}
            {!isOwn && !showAvatar && <div className="w-10" />}

            <div className={cn('flex flex-col gap-1', isOwn && 'items-end')}>
                {showAvatar && !isOwn && (
                    <div className="flex items-center gap-2 px-1">
                        <span className="text-sm font-medium">{message.senderName}</span>
                        <span className="text-xs text-muted-foreground">{message.timestamp}</span>
                    </div>
                )}

                <div
                    className={cn(
                        'max-w-md rounded-2xl px-4 py-2.5',
                        isOwn ? 'rounded-br-sm bg-[#3A73FB] text-white' : 'rounded-bl-sm bg-muted text-foreground',
                    )}
                >
                    <p className="text-sm leading-relaxed">{message.content}</p>
                </div>

                {isOwn && (
                    <div className="flex items-center gap-1 px-1">
                        <span className="text-xs text-muted-foreground">{message.senderName}</span>
                        <span className="text-xs text-muted-foreground">•</span>
                        <span className="text-xs text-muted-foreground">{message.timestamp}</span>
                        <CheckCheck className="ml-1 h-3 w-3 text-primary" />
                    </div>
                )}
            </div>
        </div>
    );
}