"use client";

import Link from "next/link";
import type { CommonContent } from "@/content/types";
import { type Locale } from "@/lib/i18n";
import { isComingSoonMode } from "@/lib/site";

type BottomNavProps = {
  locale: Locale;
  common: CommonContent;
};

export default function BottomNav({ locale, common }: BottomNavProps) {
  if (isComingSoonMode()) {
    return (
      <nav aria-label={common.navLabel} className="bottom-nav">
        <div className="container bottom-nav-inner">
          <div className="bottom-nav-links">
            <Link href={`/${locale}`} className="active" aria-current="page">
              <span aria-hidden className="nav-icon">
                ○
              </span>
              {common.nav.home}
            </Link>
          </div>
        </div>
      </nav>
    );
  }

  const homePath = `/${locale}`;
  const aboutPath = `/${locale}/about`;
  const contactPath = `/${locale}/contact`;

  return (
    <nav aria-label={common.navLabel} className="bottom-nav">
      <div className="container bottom-nav-inner">
        <div className="bottom-nav-links">
          <Link href={homePath} className="active" aria-current="page">
            <span aria-hidden className="nav-icon">
              ○
            </span>
            {common.nav.home}
          </Link>
          <Link href={aboutPath}>
            <span aria-hidden className="nav-icon">
              □
            </span>
            {common.nav.about}
          </Link>
          <Link href={contactPath}>
            <span aria-hidden className="nav-icon">
              ◇
            </span>
            {common.nav.contact}
          </Link>
        </div>
      </div>
    </nav>
  );
}