use dioxus::prelude::*;

turf::style_sheet!("src/components/avatar_selector.scss");

pub fn AvatarSelector(cx: Scope) -> Element {
    cx.render(rsx! {
        style { STYLE_SHEET },

        div {
            class: ClassName::SELECTOR,
            svg {
                view_box: "0 0 100 100",
                linearGradient {
                    id: "avatar-gradient",
                    x1: 1,
                    y1: 1,
                    x2: 0,
                    y2: 0,
                    stop {
                        offset: "0%",
                        stop_color: "rgb(138, 191, 209)",
                    }
                    stop {
                        offset: "60%",
                        stop_color: "rgb(236, 246, 249)",
                    }
                },
                filter {
                    id: "avatar-shadow",
                    feDropShadow {
                        dx: 2,
                        dy: 2,
                        std_deviation: 3,
                        flood_opacity: 0.5,
                    },
                },
                rect {
                    width: "90",
                    height: "90",
                    rx: "12",
                    fill: "url('#avatar-gradient')",
                    filter: "url('#avatar-shadow')",
                    stroke: "grey",
                },
                // rect {
                //     x: "7.5",
                //     y: "7.5",
                //     width: "75",
                //     height: "75",
                //     fill: "transparent",
                //     stroke: "grey",
                // },
            },
            img {
                class: ClassName::PICTURE,
                src: "./images/default-avatar.png",
            },
        },
    })
}