"use client";

import React from "react";
import { sidebarLinks } from "../../../constants/index";
// import Link from "next/link";
import Image from "next/image";
import { useTranslations } from "next-intl";
import Link from "next-intl/link";
import { redirect } from "next-intl/server";
import { usePathname, useRouter } from "next/navigation";
const Header = () => {
  const t = useTranslations();
  const router = useRouter();
  const pathname = usePathname();
  let currentPath = pathname;
  const pathWithoutLocale = pathname.replace(/^\/vn/, "");

  for (const link of sidebarLinks) {
    if (pathWithoutLocale === link.route) {
      currentPath = pathWithoutLocale;
      break;
    }
    if (pathWithoutLocale == "") {
      currentPath = "/";
    }
  }
  console.log(currentPath);
  return (
    <div className="fixed top-0 w-full flex justify-between items-center bg-[#22353F] px-40 h-16">
      <Link
        href="/"
        className="bg-gradient-to-r from-[#FFB55E] to-[#3BE1A5] via-[#3BE1A5] bg-clip-text text-transparent"
      >
        Volume24h
        {/* {t("test")} */}
      </Link>
      <div className="flex gap-12">
        {sidebarLinks.map((link) => {
          return (
            <Link
              href={link?.route}
              key={link?.label}
              className={` text-[#F9C74F]`}
            >
              <span className="text-light-1 ">{link?.label}</span>
            </Link>
          );
        })}
      </div>
      <div className="flex gap-4 text-white">
        <Link locale="en" href={currentPath}>
          EN
        </Link>
        <Link locale="vn" href={currentPath}>
          VN
        </Link>
      </div>
      <button className="shadow-md bg-gradient-to-r from-[#FFB55E] to-[#40E9AC] px-4 py-2 rounded-lg hover:opacity-80">
        {t("login")}
      </button>
    </div>
  );
};

export default Header;