"use client";

import { cn } from "@/lib/utils";
import { motion } from "motion/react";

type ToggleSwitcherProps = {
  options: string[];
  className?: string;
  selectedTab: string;
  handleClick: (value: string) => void;
};

const ToggleSwitcher = ({
  options,
  className,
  selectedTab,
  handleClick,
}: ToggleSwitcherProps) => {
  return (
    <nav
      className={cn(
        "border-2 rounded-[3rem] text-contigo-violeta border-current text-xs md:text-base text-center font-semibold grow",
        className
      )}
      role="tablist"
      aria-label="Selector de opciones"
    >
      <ul className="flex h-full">
        {options.map((option) => {
          const active = option === selectedTab;

          return (
            <li key={option} role="presentation" className="grow">
              <button
                role="tab"
                id={`tab-${option}`}
                aria-selected={active}
                tabIndex={0}
                onClick={() => handleClick(option)}
                className={cn(
                  "size-full flex items-center justify-center relative transition-colors duration-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-contigo-violeta rounded-[3rem] py-1.5 md:py-2.5",
                  { "text-white pointer-events-none": active }
                )}
                disabled={active}
              >
                {active && (
                  <motion.div
                    layoutId="selected-tab"
                    className="size-full bg-contigo-violeta absolute rounded-[3rem] shadow-[inset_0_0_0_0.125rem_theme(colors.contigo.violeta)]"
                  />
                )}
                <span className="relative z-10">{option}</span>
              </button>
            </li>
          );
        })}
      </ul>
    </nav>
  );
};

export default ToggleSwitcher;