Acion Bar

use icons::{AtSign, Mail, Pin, User};
use leptos::prelude::*;

use crate::components::_coming_soon::action_bar::{ActionBar, LiquidPointerIndicator};

#[component]
pub fn DemoActionBar() -> impl IntoView {
    const CLASS_LABEL: &str = "flex relative justify-center items-center mx-1 bg-transparent border-0 duration-300 cursor-pointer outline-none action__bar__button px-[15px] py-[10px] before:inset-[-0.4rem] rounded-[50px] transition-[background-color,color] ease-[ease] has-[:checked]:hover:bg-[#fcebeb] has-[:checked]:focus:bg-[#fcebeb] before:content-[''] before:absolute hover:bg-[#f5f5f5] focus:bg-[#f5f5f5]";
    const CLASS_ICON: &str =
        "stroke-[1.5] size-6 has-[:checked]:drop-shadow-[0_0_4px_tomato] has-[:checked]:stroke-[2.5]";

    view! {
        <div class="flex justify-center items-center w-full h-[400px] bg-[#f0f0f0]">
            <ActionBar>
                <input type="radio" id="action-user" name="action" class="sr-only" />
                <label data-name="ActionBarButton" for="action-user" class=CLASS_LABEL>
                    <User class=CLASS_ICON />
                </label>

                <input type="radio" id="action-pin" name="action" class="sr-only" />
                <label data-name="ActionBarButton" for="action-pin" class=CLASS_LABEL>
                    <Pin class=CLASS_ICON />
                </label>

                <input type="radio" id="action-at-sign" name="action" class="sr-only" checked />
                <label data-name="ActionBarButton" for="action-at-sign" class=CLASS_LABEL>
                    <AtSign class=CLASS_ICON />
                </label>

                <input type="radio" id="action-mail" name="action" class="sr-only" />
                <label data-name="ActionBarButton" for="action-mail" class=CLASS_LABEL>
                    <Mail class=CLASS_ICON />
                </label>
            </ActionBar>

            <LiquidPointerIndicator />
        </div>
    }
}