"use client";

import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
import styles from "./index.module.scss";
import { locales } from "@/lib/i18n/config";
import { Link, usePathname } from "@/lib/i18n/navigation";
import { useLocale } from "next-intl";
import Flag from "react-world-flags";

export default function Locale() {
  const pathname = usePathname();
  const currentLocale = useLocale();
  const current = locales?.find((l) => l.code === currentLocale) ?? locales?.[0];

  return (
    <DropdownMenu.Root >
      <DropdownMenu.Trigger className={styles.trigger}>
          <div className={styles.language}>
            <Flag code={current?.icon} className={styles.flag} />
            <span>{current?.nativeName}</span>
          </div>
          <span>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <path d="m6 9 6 6 6-6" />
            </svg>
          </span>
        
      </DropdownMenu.Trigger>

      <DropdownMenu.Portal>
        <DropdownMenu.Content
          className={styles.menu}
          sideOffset={0}
          align="start"
          
        >
          {locales?.map((item) => (
            <DropdownMenu.Item key={item.code} asChild>
              <Link
                href={pathname}
                locale={item.code}
                className={styles.menuItem}
              >
                <Flag code={item?.icon} className={styles.flag} />
                <span>{item?.nativeName}</span>
              </Link>
            </DropdownMenu.Item>
          ))}
        </DropdownMenu.Content>
      </DropdownMenu.Portal>
    </DropdownMenu.Root>
  );
}

.trigger {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 160px;
  justify-content: space-between;
  font-size: var(--font-base);
  border: 0;
  padding: 5px;
  font-size: var(--font-sm);
  .language {
    display: flex;
    gap: 10px;
    align-items: center;
    white-space: nowrap;
     overflow: hidden;          // 配合截断
  text-overflow: ellipsis;   // 超出显示省略号
  }
  img {
    width: 25px;
    height: 25px;
  }
}

.menu {
  display: flex;
  flex-direction: column;
  font-size: var(--font-sm);
  background-color: #fff;
  width: 160px;
  max-height: 400px;
  overflow-y: auto;
  .menuItem {
    outline: none;

    display: flex;
    
    align-items: center;
    padding: 5px;
    gap: 10px;
    &[data-highlighted] {
      background-color: #f5f5f5; // 你想要的 hover 背景色
      color: var(--primary-color); // 可选：文字颜色
    }
    img {
      width: 25px;
      height: 25px;
    }
  }
}