<!-- [DEF:Toast:Component] -->
<!--
@SEMANTICS: toast, notification, feedback, ui
@PURPOSE: Displays transient notifications (toasts) in the bottom-right corner.
@LAYER: UI
@RELATION: DEPENDS_ON -> frontend/src/lib/toasts.js

@PROPS: None
@EVENTS: None
-->
<script>
    // [SECTION: IMPORTS]
    import { toasts } from '../lib/toasts.js';
    // [/SECTION]
</script>

<!-- [SECTION: TEMPLATE] -->
<div class="fixed bottom-0 right-0 p-4 space-y-2">
    {#each $toasts as toast (toast.id)}
        <div class="p-4 rounded-md shadow-lg text-white
            {toast.type === 'info' && 'bg-blue-500'}
            {toast.type === 'success' && 'bg-green-500'}
            {toast.type === 'error' && 'bg-red-500'}
        ">
            {toast.message}
        </div>
    {/each}
</div>
<!-- [/SECTION] -->

<!-- [/DEF:Toast] -->
