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

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

#[component]
pub fn Projects() -> 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]",
                    "Projects"
                }
                
                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:"projects-list mt-5 df4z73x",
                            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; --border-color: #5e95e380; --drop-color: #5e95e326; --bg-color: #5e95e303; --drop-x: 493.2045202255249px; --drop-y: 32.51171875px; --rot-x: 4.36deg; --rot-y: 4.82deg;",
                                div {  class: "card-bg-img flex-1 flex flex-col p-25px rounded-15px d1441skb",

                                    div {  class: "m-t-20px row justify-between items-center",
                                        h3 { class: "font-[var(--title-f)] text-1.25em",
                                            "Project 1"
                                        }
                                    }

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

                                    div {  class: "col m-b-15px justify-between text-[var(--secondary-text)] text-0.85em",
                                        div { class: "row items-center gap-2",
                                            i {  class: "i-carbon-assembly-cluster text-1.25em" }
                                            p { "Website Template"}

                                        }

                                        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"}
                                            p { "1 day"}
                                        }

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

                                    div { class: "col sm:h-100px md:h-160px",
                                        p { class: "text-[0.9em] text-[var(--secondary-text)] m-t-20px m-b-40px flex-1 line-clamp-3",
                                        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore non dolores voluptatibus vitae praesentium aperiam, iure laboriosam repellendus sunt explicabo pariatur totam enim, nihil animi quisquam. Sit vero quod laborum!"
                                        }
                                    }

                                    div { class:"row justify-between text-0.8em font-400",
                                        button { class: "row-center cursor-pointer py-[5px] px-[15px] m-[2.5px] decoration-none inline-block border-[1px] border-solid border-[var(--border)] rounded-[20px] tracking-wider text-[0.9em] text-[var(--tertiary-text)] duration-[150ms] font-light bg-transparent hover:bg-[var(--main-hover)]",
                                            "May 2025"
                                        }
                                        button { class: "row-center cursor-pointer py-[5px] px-[15px] m-[2.5px] decoration-none inline-block border-[1px] border-solid border-[var(--border)] rounded-[20px] tracking-wider text-[0.9em] text-[var(--tertiary-text)] duration-[150ms] font-light bg-transparent hover:bg-[var(--main-hover)]",
                                            "now"
                                        }
                                    }

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

                                    div {  class: "row flex-wrap",
                                        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",
                                            img { class: "w-15px h-15px d1m94jop",
                                                
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        Outlet::<Route> {}
    }
}