Faq

use icons::Plus;
use leptos::prelude::*;

use crate::components::ui::faq::{
    Faq, FaqContent, FaqDescription, FaqInput, FaqLabel, FaqSection, FaqTitle,
};

#[component]
pub fn DemoFaq() -> impl IntoView {
    const TARGET_FAQ_1: &str = "faq1";
    const TARGET_FAQ_2: &str = "faq2";
    const TARGET_FAQ_3: &str = "faq3";

    view! {
        <section class="flex flex-col justify-center items-center py-6 px-12 w-screen h-[600px] bg-zinc-200 text-zinc-50 dark:bg-zinc-900">

            <Faq>
                <FaqSection>
                    <FaqInput id=TARGET_FAQ_1 />
                    <FaqLabel for_attr=TARGET_FAQ_1>
                        <FaqTitle>{"What is Rust UI?"}</FaqTitle>
                        <Plus class="size-5 text-primary" />
                    </FaqLabel>
                    <FaqContent>
                        <FaqDescription>
                            {"Rust UI is a Blazingly fast UI library made for Rust fullstack applications. It's built on top of Leptos framework and Tailwind CSS and is designed to be easy to use and customize."}
                        </FaqDescription>
                    </FaqContent>
                </FaqSection>

                <FaqSection>
                    <FaqInput id=TARGET_FAQ_2 />
                    <FaqLabel for_attr=TARGET_FAQ_2>
                        <FaqTitle>{"What difference between Rust UI and Shadcn UI?"}</FaqTitle>
                        <Plus class="size-5 text-primary" />
                    </FaqLabel>
                    <FaqContent>
                        <FaqDescription>
                            {"We took inspiration of Shadcn UI to create a modular approach to building UI components. It means that you can easily customize and extend the components to your needs. You also 'own' your components, they are directly in your codebase."}
                        </FaqDescription>
                    </FaqContent>
                </FaqSection>

                <FaqSection>
                    <FaqInput id=TARGET_FAQ_3 />
                    <FaqLabel for_attr=TARGET_FAQ_3>
                        <FaqTitle>{"Can I use Rust UI in my project?"}</FaqTitle>
                        <Plus class="size-5 text-primary" />
                    </FaqLabel>
                    <FaqContent>
                        <FaqDescription>
                            {"Yes, you can use Rust UI in your project. It's licensed under the MIT license, so you can use it in your commercial projects. At the moment, all the components are free, but it might change in the future."}
                        </FaqDescription>
                    </FaqContent>
                </FaqSection>
            </Faq>

        </section>
    }
}

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

// TODO UI. Refactor {FaqInput, FaqLabel, FaqTitle} into a single component (FaqHeader)
// * └──> Tried but did not work.. :/ Maybe because we need a Fragment ?

// <FaqHeader
// id="faq1"
// for_attr="faq1"
// title="What is the meaning of life, the universe, and everything?"
// />

// #[component]
// pub fn FaqHeader(
//     #[prop(into)] id: &'static str,
//     #[prop(into)] for_attr: &'static str,
//     #[prop(into)] title: &'static str,
// ) -> impl IntoView {
//     view! {
//         <>
//             <input id=id type="checkbox" class="ml-auto sr-only peer" />
//             <label
//                 for_attr=for_attr
//                 class="flex justify-between items-center px-4 py-2 mt-2 w-full cursor-pointer"
//             >
//                 <FaqTitle>{title}</FaqTitle>
//                 <Plus class="size-5 text-primary" />
//             </label>
//         </>
//     }
// }