Card

use leptos::prelude::*;

use crate::components::ui::button::{Button, ButtonVariant};
use crate::components::ui::card::{Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle};

#[component]
pub fn DemoCard() -> impl IntoView {
    view! {
        <Card class="max-w-lg @lg:max-w-2xl">
            <CardHeader>
                <CardTitle>"Card Title"</CardTitle>
            </CardHeader>

            <CardContent>
                <CardDescription>
                    "Hello, this is a more detailed description of the card content. You can add more text here to provide additional information about the card's purpose, features, or any other relevant details that might interest the viewer."
                </CardDescription>
            </CardContent>

            <CardFooter class="justify-end">
                <Button variant=ButtonVariant::Outline>"Cancel"</Button>
                <Button>"Confirm"</Button>
            </CardFooter>
        </Card>
    }
}

use icons::{CircleAlert, Cloud, Search};
use leptos::prelude::*;
use leptos_ui::clx;

use crate::components::ui::button::{Button, ButtonVariant};

#[component]
pub fn DemoCardGroup() -> impl IntoView {
    clx! {IconWrapper, div, "grid place-items-center bg-white rounded-xl ring-1 transition duration-500 group-hover:duration-200 size-12 ring-black/[0.08] group-hover:-translate-y-0.5 shadow-lg"}
    clx! {CardGroup, div, "group", "p-14 w-full text-center rounded-xl border transition duration-500 hover:duration-200 bg-accent hover:bg-secondary"}

    view! {
        <CardGroup class="max-w-[620px]">
            <div class="flex justify-center isolate">
                <IconWrapper class="relative top-1.5 left-2.5 -rotate-6 group-hover:-rotate-12 group-hover:-translate-x-5">
                    <Cloud class="size-4" />
                </IconWrapper>
                <IconWrapper class="z-10">
                    <Search class="size-4" />
                </IconWrapper>
                <IconWrapper class="relative top-1.5 right-2.5 rotate-6 group-hover:rotate-12 group-hover:translate-x-5">
                    <CircleAlert class="size-4" />
                </IconWrapper>
            </div>

            <h2 class="mt-6 text-base font-medium">"No Icons Found"</h2>
            <p class="mx-auto mt-1 text-sm text-muted-foreground max-w-[300px]">
                "You were searching for Icons in Rust/UI but none of them was found. Sorry!"
            </p>

            <Button variant=ButtonVariant::Outline class="mt-4" attr:href="/icons">
                "Go Back to Icons Page"
            </Button>
        </CardGroup>
    }
}

use leptos::prelude::*;

use crate::components::ui::card::{Card, CardDescription, CardTitle};

#[component]
pub fn DemoCardReverse() -> impl IntoView {
    view! {
        <div class="space-y-6">
            // Card 1 - Normal layout
            <Card class="flex flex-col gap-6 px-6 md:flex-row">
                <div class="w-full h-48 rounded-lg md:w-1/3 md:h-32 bg-muted" />

                <div class="flex-1 pt-0">
                    <CardTitle class="mb-3">"Nature's Beauty"</CardTitle>
                    <CardDescription>
                        "Nature's beauty encompasses a vast array of colors, sounds, and textures that evoke a sense of wonder. Its rhythms and patterns create a calming atmosphere that can rejuvenate the spirit."
                    </CardDescription>
                </div>
            </Card>

            // Card 2 - Reverse layout
            <Card class="flex flex-col gap-6 px-6 md:flex-row-reverse">
                <div class="w-full h-48 rounded-lg md:w-1/3 md:h-32 bg-accent" />

                <div class="flex-1 pt-0">
                    <CardTitle class="mb-3">"Ecosystem Balance"</CardTitle>
                    <CardDescription>
                        "The intricate balance of ecosystems showcases the interdependence of all living beings. Each element, from the smallest insect to the largest tree, plays a vital role in sustaining life."
                    </CardDescription>
                </div>
            </Card>

            // Card 3 - Normal layout
            <Card class="flex flex-col gap-6 px-6 md:flex-row">
                <div class="w-full h-48 rounded-lg md:w-1/3 md:h-32 bg-muted" />

                <div class="flex-1 pt-0">
                    <CardTitle class="mb-3">"Changing Landscapes"</CardTitle>
                    <CardDescription>
                        "The ever-changing landscapes of nature remind us of the passage of time. Seasons bring transformations that create a dynamic environment filled with diverse flora and fauna."
                    </CardDescription>
                </div>
            </Card>
        </div>
    }
}