use icons::RotateCcw;
use leptos::prelude::*;

use crate::components::ui::animate::{AnimateGroup, AnimateGroupItem, AnimateVariant};
use crate::components::ui::button::{Button, ButtonSize, ButtonVariant};
use crate::components::ui::headings::{H1, HeadingVariant};

// TODO DEMO. The trigger does not seem to work... 🤔 Figure out why

#[component]
pub fn DemoAnimateGroup() -> impl IntoView {
    let (_trigger, set_trigger) = signal(false);

    let handle_click = move || {
        set_trigger.update(|value| *value = !*value);
    };

    view! {
        <AnimateGroup class="flex relative flex-col gap-8 items-center w-full max-w-4xl h-80">
            <Button
                class="absolute top-0 right-0 z-10"
                on:click=move |_| handle_click()
                size=ButtonSize::Icon
            >
                <RotateCcw class="size-4" />
            </Button>

            <AnimateGroupItem variant=AnimateVariant::FadeUp delay_ms=250>
                <H1 variant=HeadingVariant::Modern class="mt-6 text-center text-transparent">
                    "The only UI website"
                </H1>
            </AnimateGroupItem>
            <AnimateGroupItem variant=AnimateVariant::FadeUp class="mx-auto max-w-lg" delay_ms=450>
                <p class="text-base font-normal text-center text-neutral-300">
                    "Unstyled highly composable components that you can copy/paste in your own
                    codebase. Built with Tailwind CSS and a bit of Framer Motion. Customize them as
                    you want."
                </p>
            </AnimateGroupItem>

            <AnimateGroupItem variant=AnimateVariant::FadeUp class="space-x-4" delay_ms=600>
                <Button>"Components"</Button>
                <Button variant=ButtonVariant::Outline>"Get started"</Button>
            </AnimateGroupItem>
        </AnimateGroup>
    }
}