import type { Data } from "@/server/services/model";
import { navIsActive } from "@/lib/view-helpers";
export function MobileTabbar({ data }: { data: Data }) {
  const path = data.requestPath;
  if (!path) return null;
  const active = (url: string) => navIsActive(url, path),
    home = active("/"),
    short = active("/dramas/"),
    series = active("/series/");
  if (!(home || short || series)) return null;
  return (
    <nav className="hk-mobile-tabbar" aria-label="移动端主导航">
      {[
        ["/", "首页", "home", home, "home"],
        ["/dramas/", "短剧", "film", short, "short"],
        ["/series/", "剧集", "tv", series, "series"],
      ].map(([href, label, icon, isActive, key]) => (
        <a
          key={String(key)}
          className={"hk-mobile-tabbar__item" + (isActive ? " hk-is-active" : "")}
          href={String(href)}
          aria-current={isActive ? "page" : undefined}
          data-navigation-key={"mobile_" + key}
          data-navigation-name={String(label)}
        >
          <img
            fetchPriority="low"
            src={
              "/static/images/mobile-tabbar/" +
              icon +
              "-" +
              (isActive ? "active" : "muted") +
              ".svg"
            }
            width="22"
            height="22"
            alt=""
            aria-hidden="true"
          />
          <span>{label}</span>
        </a>
      ))}
    </nav>
  );
}