<script lang="ts">
    import { marked } from "marked";

    let { text, sender } = $props<{
        text: string;
        sender: "user" | "ai";
    }>();
</script>

<div
    class="p-3 px-5 rounded-[20px] max-w-[85%] text-[15px] leading-relaxed transition-all duration-200
    {sender === 'user'
        ? 'self-end bg-gradient-to-br from-emerald-500 to-emerald-600 text-white rounded-br-md shadow-lg shadow-emerald-500/20'
        : 'self-start bg-teal-900/40 border border-white/10 text-white rounded-bl-md shadow-sm backdrop-blur-sm'}"
>
    <div
        class="message-content prose prose-invert prose-p:my-1 prose-headings:my-2 prose-strong:text-white prose-ul:my-1 max-w-none"
    >
        {@html marked.parse(text)}
    </div>
</div>

<style>
    
    :global(.message-content p) {
        margin: 0 0 0.5rem 0;
    }
    :global(.message-content p:last-child) {
        margin: 0;
    }
    :global(.message-content strong) {
        font-weight: 700;
        color: inherit;
    }
    :global(.message-content ul),
    :global(.message-content ol) {
        margin: 0.25rem 0 0.5rem 1.25rem;
        padding: 0;
    }
    :global(.message-content li) {
        margin-bottom: 0.25rem;
    }
</style>
