use crate::components::icons;
use crate::components::outlined_box::OutlinedBox;
use crate::gradient::Gradient;
use leptos::prelude::*;

#[component]
pub fn Checkbox(checked: RwSignal<bool>, #[prop(into)] text: Signal<String>, #[prop(optional)] color: Gradient) -> impl IntoView {
    let unique_id = Oco::from(format!("checkbox-{}", uuid::Uuid::new_v4()));

    let checkbox_view = view! {
        <div class="self-center my-2.5 mx-5 text-white bg-white rounded-xs aspect-square">
            <span class=("text-gray-950", move || checked.get())>
                <icons::Check />
            </span>
        </div>
    };

    let separator = {
        let mut classes = "w-0.5 bg-linear-to-br min-w-0.5".to_string();
        classes.push(' ');
        classes.push_str(color.class_from());
        classes.push(' ');
        classes.push_str(color.class_to());
        view! { <div class=classes /> }
    };

    let text_view = view! {
        <div class="self-center my-2.5 mx-5 w-full text-lg font-thin uppercase">
            {move || text.get()}
        </div>
    };

    view! {
        <div class="inline-block mb-2 me-2 hover:brightness-125 active:brightness-90">
            <input
                type="checkbox"
                id=unique_id.clone()
                value=""
                class="hidden peer"
                required=""
                bind:checked=checked
            />
            <label for=unique_id class="cursor-pointer">
                <OutlinedBox color>
                    <div class="flex">{checkbox_view} {separator} {text_view}</div>
                </OutlinedBox>
            </label>
        </div>
    }
}
