use leptos::prelude::*;
use leptos_router::components::A;
use crate::components::prelude::*;

#[component]
fn FooterNavLink(
    href: &'static str,
    children: Children,
    #[prop(optional)] id: Option<&'static str>,
) -> impl IntoView {
    let is_external = href.starts_with("http");
    
    if is_external {
        view! {
            <a 
                href=href
                target="_blank"
                rel="noopener noreferrer"
                class="py-2 px-4 gap-2 rounded-full hover:bg-white hover:bg-opacity-5 transition-colors duration-300 no-underline"
                id=id.unwrap_or("footer-nav-link")
            >
                <span class="font-semibold text-base text-center tracking-tight text-[var(--main-light-40)]">
                    {children()}
                </span>
            </a>
        }.into_any()
    } else {
        view! {
            <A 
                href=href
                attr:class="flex flex-row items-center py-2 px-4 gap-2 rounded-full hover:bg-white hover:bg-opacity-5 transition-colors duration-300"
                attr:id=id.unwrap_or("footer-nav-link")
            >
                <span class="font-semibold text-base text-center tracking-tight text-[var(--main-light-40)]">
                    {children()}
                </span>
            </A>
        }.into_any()
    }
}

#[component]
pub fn Footer() -> impl IntoView {
    view! {
        <footer 
            class=""
            id="main-footer"
        >
            <div id="footer-logo" class="flex items-center gap-2">
              <div class="w-[92px] h-8 flex items-center justify-center" id="footer-logo-container">
                <A href=t8r!("/en")().get() attr:class="flex items-center justify-center" attr:id="footer-logo-link">
                  <span class="font-bold text-xl leading-none text-[var(--main-light-40)] tracking-tight" id="footer-logo-text">
                    "VProxy"
                  </span>
                </A>
              </div>
              <span class="font-semibold text-base leading-none text-[var(--main-light-40)] tracking-tight" id="footer-copyright">
                "© 2025"
              </span>
            </div>

            <div id="footer-links">
                <FooterNavLink href="https://t.me/V_Proxy_bot" id="footer-link-telegram">
                    {t8r!("Telegram Bot")}
                </FooterNavLink>
                <FooterNavLink href="https://t.me/VProxy_Support_bot" id="footer-link-support">
                    {t8r!("Support")}
                </FooterNavLink>
                <FooterNavLink href="https://t.me/VProxyNews" id="footer-link-news">
                    {t8r!("News Channel")}
                </FooterNavLink>
                <FooterNavLink href=t8s!("/en/terms-and-rules") id="footer-link-rules">
                    {t8r!("Terms And Rules")}
                </FooterNavLink>
            </div>
        </footer>
    }
}
