Transition List

use leptos::prelude::*;
use leptos_meta::Stylesheet;

use crate::components::extensions::transition_list::{
    Amount, ButtonClose, ContainerTransition, Details, IconContainer, IconTransition, ListHeader,
    PaymentDetails, Subtitle, Title, TitleContainer, TransactionDetails, TransactionList, TransactionWrapper,
};

#[component]
pub fn DemoTransitionList() -> impl IntoView {
    view! {
        <Stylesheet href="/components/transition_list.css" />

        <div class="flex items-center justify-center h-[600px] font-sans bg-gray-100 w-full">
            <ContainerTransition>
                <ListHeader>Transactions</ListHeader>
                <TransactionList>
                    <DemoComponent />
                    <DemoComponent />
                    <DemoComponent />
                    <DemoComponent />
                    <DemoComponent />
                </TransactionList>

                <div class="flex items-center justify-center p-4 mt-2 font-medium text-gray-800 cursor-pointer all-transactions">
                    "All Transactions →"
                </div>
            </ContainerTransition>
        </div>

        <script src="/components/transition_list.js" />
    }
}

/*´:°•.°+.*•´.*:˚.°*.˚•´.°:°•.°•.*•´.*:˚.°*.˚•´.°:°•.°+.*•´.*:*/
/*                     ✨ FUNCTIONS ✨                        */
/*.•°:°.´+˚.*°.˚:*.´•*.+°.•°:´*.´•*.•°.•°:°.´:•˚°.*°.˚:*.´+°.•*/

#[component]
pub fn DemoComponent() -> impl IntoView {
    view! {
        <TransactionWrapper>
            <IconContainer>
                <IconTransition>
                    <IconRandom />
                </IconTransition>

                <ButtonClose>
                    <IconClose />
                </ButtonClose>
            </IconContainer>

            <Details>
                <TitleContainer>
                    <Title>Netflix</Title>
                    <Subtitle>Subscription</Subtitle>
                </TitleContainer>
                <Amount>"-$6.99"</Amount>
            </Details>
            <TransactionDetails>
                <div class="transaction-id">#67593</div>
                <div class="transaction-date">September 26</div>
                <div class="transaction-time">12:01 am</div>
            </TransactionDetails>
            <PaymentDetails>
                <div class="payment-method">Paid Via Credit Card</div>
                <div class="payment-info">XXXX 9342 VISA</div>
            </PaymentDetails>
        </TransactionWrapper>
    }
}

/*´:°•.°+.*•´.*:˚.°*.˚•´.°:°•.°•.*•´.*:˚.°*.˚•´.°:°•.°+.*•´.*:*/
/*                     ✨ FUNCTIONS ✨                        */
/*.•°:°.´+˚.*°.˚:*.´•*.+°.•°:´*.´•*.•°.•°:°.´:•˚°.*°.˚:*.´+°.•*/

#[component]
pub fn IconRandom() -> impl IntoView {
    view! {
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <path d="M3 3h18v18H3z" stroke-width="2" />
            <path d="M9 12h6M12 9v6" stroke-width="2" stroke-linecap="round" />
        </svg>
    }
}

#[component]
pub fn IconClose() -> impl IntoView {
    view! {
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor">
            <path d="M12 4L4 12M4 4l8 8" stroke-width="2" stroke-linecap="round" />
        </svg>
    }
}