import type { LanguageSwitcherProps } from "@/types/components/current/languageSwitcher";

export default function Desktop({
  currentLanguage,
  links,
}: LanguageSwitcherProps) {
  return (
    <div className="dropdown-container navbar-language-selector ">
      <button
        className="navbar-language-selector__toggler"
        data-js="dropdown-toggler"
        aria-pressed="false"
      >
        <svg
          focusable="false"
          className="icon icon--xs icon--white"
          viewBox="0 0 32 32"
        >
          <use xlinkHref="/Static/img/icons/sprites.svg#icon-globe"></use>
        </svg>
        {currentLanguage}
        <span className="hidden--accessible">Choose language</span>
        <span className="caret"></span>
      </button>
      <ul className="dropdown-menu">
        {links.map((link) => (
          <li
            className={currentLanguage === link.title ? "active" : undefined}
            key={link.href}
          >
            <a href={link.href}>{link.title}</a>
          </li>
        ))}
      </ul>
    </div>
  );
}