import React from "react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";

/**
 * Segmented toggle bar for switching between the main applicant and
 * co-applicant(s) in the loan wizard. Returns null when fewer than 2
 * applicants are present.
 */

export type ApplicantSwitcherApplicant = {
  name: string;
};

export type ApplicantSwitcherProps = {
  applicants: ApplicantSwitcherApplicant[];
  selectedIndex: number;
  onSelect: (index: number) => void;
  className?: string;
};

export function ApplicantSwitcher({
  applicants,
  selectedIndex,
  onSelect,
  className,
}: ApplicantSwitcherProps) {
  if (!applicants || applicants.length <= 1) return null;

  return (
    <div
      className={cn("flex w-fit items-center", className)}
      role="group"
      aria-label="Select applicant"
    >
      {applicants.map((applicant, index) => (
        <Button
          key={index}
          type="button"
          variant={selectedIndex === index ? "default" : "outline"}
          onClick={() => onSelect(index)}
          aria-pressed={selectedIndex === index}
          className={cn(
            "rounded-none",
            // Remove left border on non-first items to create a joined look
            index > 0 && "-ml-px",
          )}
        >
          {applicant.name}
        </Button>
      ))}
    </div>
  );
}