"use client";

import { useState } from "react";

export default function LanguageSelect({ color = "#22b573" }) {
  const languages = ["En"];
  const [activeLang, setActiveLang] = useState("En");
  return (
    <>
      {" "}
      <a
        className={`nav-link dropdown-item dropdown-toggle !text-[.7rem] hover:!text-[${color}] after:!text-[${color}]`}
        href="#"
        role="button"
        data-bs-toggle="dropdown"
        aria-haspopup="true"
        aria-expanded="false"
      >
        {activeLang}
      </a>
      <ul className="dropdown-menu group-hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
        {languages.map((lang) => (
          <li className="nav-item" key={lang}>
            <a
              href="#"
              onClick={() => setActiveLang(lang)}
              className={`dropdown-item !text-[.7rem] hover:!text-[${color}] hover:bg-[inherit] ${
                activeLang === lang ? `!text-[${color}]` : ""
              }`}
            >
              {lang}
            </a>
          </li>
        ))}
      </ul>
    </>
  );
}