import Link from "next/link";
import { Boxes, LogIn } from "lucide-react";
import { LanguageToggle } from "@/components/language-toggle";
import { LinkButton } from "@/components/ui";
import { getDictionary, getLocale } from "@/lib/i18n";

export async function MarketingNav() {
  const locale = await getLocale();
  const t = getDictionary(locale);

  return (
    <header className="mx-auto flex w-full max-w-6xl items-center justify-between px-4 py-5">
      <Link href="/" className="flex items-center gap-2 font-bold text-ink">
        <span className="flex h-9 w-9 items-center justify-center rounded-md bg-ink text-white">
          <Boxes size={19} />
        </span>
        wakelai.com
      </Link>
      <nav className="flex items-center gap-2">
        <LanguageToggle locale={locale} />
        <Link className="hidden text-sm font-medium text-slate-600 hover:text-ink sm:inline" href="/pricing">
          {locale === "ar" ? "الأسعار" : "Pricing"}
        </Link>
        <LinkButton href="/login" variant="secondary">
          <LogIn size={16} />
          {t.common.signIn}
        </LinkButton>
      </nav>
    </header>
  );
}