"use client";

import { FiChevronRight } from "react-icons/fi";

import { SETTINGS_TABS } from "../constants/tabs";
import { SettingsTab } from "../types/settings";

interface Props {
  activeTab: SettingsTab;
  onChange: (tab: SettingsTab) => void;
}

export default function SettingsSidebar({
  activeTab,
  onChange,
}: Props) {
  return (
    <div className="w-full overflow-x-auto xl:overflow-x-visible">
      <div className="flex gap-2 2xl:block 2xl:space-y-4 min-w-max 2xl:min-w-0">
        {SETTINGS_TABS.map((item) => (
          <button
            key={item.key}
            onClick={() => onChange(item.key)}
            className={`flex w-full items-center whitespace-nowrap justify-center xl:justify-between
              rounded-md md:rounded-xl p-3 md:p-4 2xl:p-6 text-sm text-center xl:text-left 2xl:text-lg font-medium cursor-pointer

              ${
                activeTab === item.key
                  ? "gradient1 text-white"
                  : "glass-card-v2 text-heading"
              }
            `}
          >
            <span className="max-w-30 xl:w-full truncate">
              {item.label}
            </span>

            <FiChevronRight className="hidden xl:block"/>
          </button>
        ))}
      </div>
    </div>
  );
}