<script>
    import Alert from "$lib/components/alert.svelte";
</script>

<h1>Alerts</h1>
<section>
    <h2>Info</h2>
    <Alert type="info" message="This is message" title="This is title" />
</section>

<section>
    <h2>Warning</h2>
    <Alert type="warning" message="This is message" title="This is title" />
</section>
<section>
    <h2>Error</h2>
    <Alert type="error" message="This is message" title="This is title" />
</section>
<section>
    <h2>Success</h2>
    <Alert type="success" message="This is message" title="This is title" />
</section>
<section>
    <h2>Actions</h2>
    <Alert
        type="info"
        message="This is message"
        title="This is title"
        actions={[
            {
                id: "confirm",
                text: "Yes!",
                color: "green",
            },
            {
                id: "cancel",
                text: "No!",
                color: "red",
            },
        ]}
    />
</section>
<section>
    <h2>Right link</h2>
    <Alert
        on:rightLinkCliked={() => alert("Right link clicked")}
        rightLinkText="Link or action"
        type="info"
    />
</section>
<section>
    <h2>List</h2>
    <Alert
        title="This is title"
        listItems={["Message 1", "Message 2"]}
        type="info"
    />
</section>
<section>
    <h2>Closeable</h2>
    <Alert message="This is message" closeable type="info" />
</section>
