import React from "react";
import type { TabGroup, StepStatus } from "./wizardTypes";

interface GroupNavigationProps {
  groups: TabGroup[];
  activeGroupIdx: number;
  setActiveGroupIdx: (idx: number) => void;
  getProgress: (group: TabGroup) => number;
  isGroupDisabled: (idx: number) => boolean;
}

export default function GroupNavigation({
  groups,
  activeGroupIdx,
  setActiveGroupIdx,
  getProgress,
  isGroupDisabled,
}: GroupNavigationProps) {
  return (
    <div className="mt-1 md:mt-2 flex flex-wrap gap-0.5 md:gap-1">
      {groups.map((group, idx) => {
        const wdLength = groups.length;
        const widthClass =
          wdLength === 1
            ? "w-full"
            : wdLength === 2
              ? "w-[49.25%]"
              : wdLength === 3
                ? "w-[49.25%] md:w-[33%]"
                : "w-[49.25%] md:w-[24.5%]";

        return (
          <button
            key={group.id}
            type="button"
            onClick={() => !isGroupDisabled(idx) && setActiveGroupIdx(idx)}
            disabled={isGroupDisabled(idx)}
            aria-current={activeGroupIdx === idx}
            className={`relative flex items-start justify-start overflow-hidden border-1 border-gray-950/50 bg-gray-100/80 px-2 py-0.5 text-xs/3 capitalize 
              ${activeGroupIdx === idx ? "" : ""} 
              ${isGroupDisabled(idx) ? "cursor-not-allowed opacity-50" : "cursor-pointer"}
              ${widthClass}
            `}
            aria-label={`${group.title} group`}
          >
            <div
              className="absolute top-0 left-0 h-full bg-green-500 blur-[8px] transition-all duration-1000"
              style={{ width: `${getProgress(group)}%` }}
            />
            <span className="relative z-10 pl-1 text-xxs font-light">{group.title}</span>
          </button>
        );
      })}
    </div>
  );
}