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

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

#[component]
pub fn Skills() -> 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]",
                    "Skills"
                }
                
                div {  
                    class: "col gap-5 flex-1",
                    div {  
                        class: "w-100% row",
                        input {
                            class: "text-[inherit] bg-transparent border-[1px] border-solid border-[var(--border)] px-[20px] py-[10px] rounded-[15px] flex-1 text-[1.15em] c0g44u",
                            type: "text",
                            placeholder: "Search skills..."
                        }
                    }

                    div { class: "w-100% col flex-1",
                        div { class: "col mt-5 gap-7",
                            div { class: "col gap-5 mb-7",
                                div { class: "row items-center gap-5",
                                    div { class: "bg-[var(--main-hover)] h-[1px] w-[20px]"}
                                    p {
                                        class: "text-[var(--main-close)]",
                                        "Programming Languages"
                                    }
                                    div { class: "flex-1 bg-[var(--main-hover)] h-[1px]"}
                                }

                                div {
                                    class: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 md:gap-3 lg:gap-5",
                                    a {
                                        class: "card text-inherit decoration-none inline-flex flex-col border-1px border-solid border-[var(--border)] rounded-15px duration relative cursor-pointer decoration-none d1441skb",
                                        style: "margin: 0px; --bg-img: url(.png); --border-color: #ffff0080; --drop-color: #ffff0026; --bg-color: #ffff0003;",
                                        div {
                                            class: "card-bg-img flex-1 flex flex-col p-25px rounded-15px d1441skb",
                                            div {
                                                class: "text-[var(--tertiary-text)]",
                                                "Javascript"
                                            }
                                        }
                                    }

                                    a {
                                        class: "card text-inherit decoration-none inline-flex flex-col border-1px border-solid border-[var(--border)] rounded-15px duration relative cursor-pointer decoration-none d1441skb",
                                        style: "margin: 0px; --bg-img: url(.png); --border-color: #ffff0080; --drop-color: #ffff0026; --bg-color: #ffff0003;",
                                        div {
                                            class: "card-bg-img flex-1 flex flex-col p-25px rounded-15px d1441skb",
                                            div {
                                                class: "text-[var(--tertiary-text)]",
                                                "PHP"
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        Outlet::<Route> {}
    }
}