use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn AlertExample() -> impl IntoView {
    view! {
        <div class="grid w-full max-w-md items-start gap-4">
            <Alert>
                {icon!(icondata::LuCircleCheck)} <AlertTitle>"Payment successful"</AlertTitle>
                <AlertDescription>
                    "Your payment of $29.99 has been processed. A receipt has been sent to
                    your email address."
                </AlertDescription>
            </Alert>
            <Alert>
                {icon!(icondata::LuInfo)} <AlertTitle>"New feature available"</AlertTitle>
                <AlertDescription>
                    "We've added dark mode support. You can enable it in your account
                    settings."
                </AlertDescription>
            </Alert>
        </div>
    }
}

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn AlertBasicExample() -> impl IntoView {
    view! {
        <Alert class="max-w-md">
            {icon!(icondata::BsCheckCircle)} <AlertTitle>"Account updated successfully"</AlertTitle>
            <AlertDescription>
                "Your profile information has been saved. Changes will be reflected
                immediately."
            </AlertDescription>
        </Alert>
    }
}

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn AlertDestructiveExample() -> impl IntoView {
    view! {
        <Alert variant="destructive" class="max-w-md">
            {icon!(icondata::FiAlertCircle)}
            <AlertTitle>"Payment failed"</AlertTitle>
            <AlertDescription>
                "Your payment could not be processed. Please check your payment method
                and try again."
            </AlertDescription>
        </Alert>
    }
}

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn AlertActionExample() -> impl IntoView {
    view! {
        <Alert class="max-w-md">
            <AlertTitle>"Dark mode is now available"</AlertTitle>
            <AlertDescription>
                "Enable it under your profile settings to get started."
            </AlertDescription>
            <AlertAction>
                <Button size="xs" variant="default">
                    "Enable"
                </Button>
            </AlertAction>
        </Alert>
    }
}