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

export default function Mobile({
  currentLanguage,
  links,
}: LanguageSwitcherProps) {
  return (
    <div className="navbar-language-selector">
      <button
        className="navbar-language-selector__toggler "
        data-js="collapsible-toggler"
        data-target="language-menu"
        aria-pressed="false"
      >
        {currentLanguage}{" "}
        <span className="navbar-language-selector__toggler__arrow"></span>
        <span className="hidden--accessible">Choose language</span>
      </button>
      <ul className="is-collapsed" data-collapsable="language-menu">
        {links.map((link) => (
          <li
            className={`navbar-language-selector__item ${currentLanguage === link.title ? "is-active" : ""}`}
            key={link.href}
          >
            <a href={link.href}>{link.title}</a>
          </li>
        ))}
      </ul>
    </div>
  )
}