use crate::Route;
use dioxus::{html::{div, input}, prelude::*};

// const SKILL_CSS: Asset = asset!("/assets/styling/blog.css");

#[component]
pub fn Experiences() -> Element {
    rsx! {
        div {  
            class: "content container mb6t29",
            div {
                class: "flex-1 col gap-5 px-2 sm:px-4 md:px-6 py-4 sm:py-8 md:py-12",
                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]",
                    "Experiences"
                }
                
                div {  
                    class: "col gap-5 flex-1",

                    div { class: "w-100% col flex-1",
                        div {  class:"col items-center relative mt-10 flex-1",
                            div {class:"w-[0.5px] hidden lg:flex top-0 bottom-0 py-50px bg-[var(--border)] absolute rounded"}
                            div {  class: "flex flex-row-reverse relative items-center w-full my-[10px]",
                                div { class: "flex-1 hidden lg:flex"}
                                div { class: "hidden lg:inline p-15px bg-[var(--main)] rounded",
                                    i { class: "i-carbon-condition-point"}
                                }
                                div { class:" flex-1 col items-stretch",
                                    a { class:" card text-inherit decoration-none inline-flex flex-col border-1px border-solid border-[var(--border)] rounded-15px duration relative d1441skb",
                                        style:" margin: 0px 0px 20px; --border-color: #ff000080; --drop-color: #ff000026; --bg-color: #ff000003;",
                                        div { class: "card-bg-img flex-1 flex flex-col p-25px rounded-15px d1441skb",
                                            div { class: "col md:flex-row items-start gap-5 md:gap-1",
                                                div{ class: "col ml-0 md:ml-[20px] gap-3 w-full",
                                                    div { class: "col ",
                                                        h3 { class: "flex text-[0.9em] flex-col items-start sm:flex-row sm:items-center justify-between sm:gap-5 md:flex-col md:items-start md:gap-0 lg:flex-row lg:items-center",
                                                            h3 {  class: "font-[var(--title-f)] text-1.25em",
                                                                "Experience 1"
                                                            }
                                                        }
                                                    }

                                                    div {class: "text-[var(--text)] text-[0.9em]",
                                                        div {class: "row items-center gap-2",
                                                            i { class: "i-carbon-calendar text-1.25em"}
                                                            "Jan 2025 - Present"
                                                        }

                                                        div {  class: "bg-[var(--border)] h-1px m-y-10px"}

                                                        div { class: "row items-center gap-2",
                                                            i { class: "i-carbon-time text-1.25em" }
                                                            "4 Years"
                                                        }

                                                        div {  class: "bg-[var(--border)] h-1px m-y-10px"}
                                                    }

                                                    div { class: "experience-description text-[0.9em]",
                                                        "Creating awesome tools for developers."
                                                    }

                                                    div {  class: "flex flex-row flex-wrap mt-5",
                                                        a { class: "chip-icon row-center relative text-inherit decoration-none p-10px m-r-5px m-b-5px border-1px border-solid border-[var(--border)] hover:border-[var(--border-hover)] rounded-10px hover:z-5 cursor-pointer grayscale-65 hover:grayscale-0 d1m94jop",
                                                            "data-Help": "Rust",
                                                            img {class: "w-15px h-15px d1m94jop",
                                                                alt: "Rust"
                                                            }
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }

                             div {  class: "flex flex-row relative items-center w-full my-[10px]",
                                div { class: "flex-1 hidden lg:flex"}
                                div { class: "hidden lg:inline p-15px bg-[var(--main)] rounded",
                                    i { class: "i-carbon-condition-point"}
                                }
                                div { class:" flex-1 col items-stretch",
                                    a { class:" card text-inherit decoration-none inline-flex flex-col border-1px border-solid border-[var(--border)] rounded-15px duration relative d1441skb",
                                        style:" margin: 0px 0px 20px; --border-color: #ff000080; --drop-color: #ff000026; --bg-color: #ff000003;",
                                        div { class: "card-bg-img flex-1 flex flex-col p-25px rounded-15px d1441skb",
                                            div { class: "col md:flex-row items-start gap-5 md:gap-1",
                                                div{ class: "col ml-0 md:ml-[20px] gap-3 w-full",
                                                    div { class: "col ",
                                                        h3 { class: "flex text-[0.9em] flex-col items-start sm:flex-row sm:items-center justify-between sm:gap-5 md:flex-col md:items-start md:gap-0 lg:flex-row lg:items-center",
                                                            h3 {  class: "font-[var(--title-f)] text-1.25em",
                                                                "Experience 1"
                                                            }
                                                        }
                                                    }

                                                    div {class: "text-[var(--text)] text-[0.9em]",
                                                        div {class: "row items-center gap-2",
                                                            i { class: "i-carbon-calendar text-1.25em"}
                                                            "Jan 2025 - Present"
                                                        }

                                                        div {  class: "bg-[var(--border)] h-1px m-y-10px"}

                                                        div { class: "row items-center gap-2",
                                                            i { class: "i-carbon-time text-1.25em" }
                                                            "4 Years"
                                                        }

                                                        div {  class: "bg-[var(--border)] h-1px m-y-10px"}
                                                    }

                                                    div { class: "experience-description text-[0.9em]",
                                                        "Creating awesome tools for developers."
                                                    }

                                                    div {  class: "flex flex-row flex-wrap mt-5",
                                                        a { class: "chip-icon row-center relative text-inherit decoration-none p-10px m-r-5px m-b-5px border-1px border-solid border-[var(--border)] hover:border-[var(--border-hover)] rounded-10px hover:z-5 cursor-pointer grayscale-65 hover:grayscale-0 d1m94jop",
                                                            "data-Help": "Rust",
                                                            img {class: "w-15px h-15px d1m94jop",
                                                                alt: "Rust"
                                                            }
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        Outlet::<Route> {}
    }
}