use crate::components::ExperienceList;
use crate::Route;
use dioxus::prelude::*;

const EXPERIENCE_CSS: Asset = asset!("/assets/styling/experience.css");

#[component]
pub fn Experiences() -> Element {
    rsx! {
        document::Stylesheet { href: EXPERIENCE_CSS }

        div {
            class: "content",
            div {
                class: "flex-1 col gap-5 px-2 sm:px-4 md:px-6 py-4 sm:py-8 md:py-12",

                // Header
                h1 {
                    class: "font-[var(--title-f)] font-black tracking-[4px] text-center text-2.5em sm:text-[3em] md:text-[3.5em] lg:text-[4em]",
                    "Experience"
                }

                // Timeline Container
                div {
                    class: "col gap-2 flex-1",
                    div {
                        class: "w-100% col flex-1",
                        ExperienceList {}
                    }
                }
            }
        }
        Outlet::<Route> {}
    }
}
