use crate::gradient::Gradient;
use leptos::prelude::*;

#[component]
pub fn OutlinedBox(children: Children, color: Gradient, #[prop(optional)] highlight: MaybeProp<bool>) -> impl IntoView {
    let highlight = move || highlight.get().unwrap_or(false);

    let outer_classes = move || {
        let mut c = "p-0.5 bg-linear-to-br rounded-lg".to_string();
        c.push(' ');
        c.push_str(color.class_from());
        c.push(' ');
        c.push_str(color.class_to());
        if highlight() {
            c.push(' ');
            c.push_str("brightness-110");
        }
        c
    };

    let inner_classes = move || {
        let mut c = "py-1.5 rounded-md".to_string();
        if highlight() {
            let bg = match color {
                Gradient::PinkOrange => "bg-rose-900",
                Gradient::CyanBlue => "bg-cyan-800",
                Gradient::TealLime => "bg-emerald-700",
                Gradient::PurplePink => "bg-fuchsia-950",
                Gradient::PurpleBlue => "bg-purple-900",
                Gradient::Orange => "bg-orange-900",
                Gradient::Pink => "bg-pink-900",
                Gradient::PinkRed => "bg-fuchsia-950",
            };

            c.push(' ');
            c.push_str(bg);
        } else {
            c.push(' ');
            c.push_str("bg-gray-900");
        }
        c
    };

    view! {
        <div class=outer_classes>
            <div class=inner_classes>{children()}</div>
        </div>
    }
}
