"use client";

import { useLocale } from "next-intl";
import { usePathname, Link } from "@/i18n/navigation";

export function LanguageSwitcher() {
  const locale = useLocale();
  const pathname = usePathname();

  return (
    <div className="flex items-center gap-1.5 rounded-full border border-neutral-200 bg-white px-1 py-1 shadow-sm">
      <span className="hidden pl-2 text-neutral-400 sm:inline" aria-hidden>
        <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.75}>
          <path strokeLinecap="round" strokeLinejoin="round" d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z" />
          <path strokeLinecap="round" strokeLinejoin="round" d="M3.6 9h16.8M3.6 15h16.8M12 3a15.3 15.3 0 0 1 4 9 15.3 15.3 0 0 1-4 9 15.3 15.3 0 0 1-4-9 15.3 15.3 0 0 1 4-9Z" />
        </svg>
      </span>
      <div className="flex items-center rounded-full bg-neutral-100 p-0.5 text-[11px] font-semibold text-neutral-600">
        <Link
          href={pathname}
          locale="en"
          className={`rounded-full px-2 py-1 transition ${
            locale === "en"
              ? "bg-white text-blue-600 shadow-sm"
              : "hover:text-neutral-900"
          }`}
          aria-current={locale === "en" ? "true" : undefined}
        >
          EN
        </Link>
        <Link
          href={pathname}
          locale="am"
          className={`rounded-full px-2 py-1 transition ${
            locale === "am"
              ? "bg-white text-orange-500 shadow-sm"
              : "hover:text-neutral-900"
          }`}
          aria-current={locale === "am" ? "true" : undefined}
        >
          አማ
        </Link>
      </div>
    </div>
  );
}