/**
 * @file Zone selector component for choosing the active zone.
 * @copyright nhcarrigan
 * @license Naomi's Public License
 * @author Naomi Carrigan
 */
import { cdnImage } from "../../utils/cdn.js";
import type { Zone } from "@elysium/types";
import type { JSX } from "react";

interface ZoneSelectorProperties {
  readonly zones:        Array<Zone>;
  readonly activeZoneId: string;
  readonly onSelectZone: (zoneId: string)=> void;
}

/**
 * Renders a zone selector with buttons for each available zone.
 * @param props - The zone selector properties.
 * @param props.zones - The list of zones to display.
 * @param props.activeZoneId - The currently active zone ID.
 * @param props.onSelectZone - Callback when a zone is selected.
 * @returns The JSX element.
 */
const ZoneSelector = ({
  zones,
  activeZoneId,
  onSelectZone,
}: ZoneSelectorProperties): JSX.Element => {
  return (
    <div className="zone-selector">
      {zones.map((zone) => {
        function handleSelect(): void {
          onSelectZone(zone.id);
        }
        return (
          <button
            className={`zone-tab ${
              zone.id === activeZoneId
                ? "zone-tab-active"
                : ""
            }`}
            key={zone.id}
            onClick={handleSelect}
            title={zone.description}
            type="button"
          >
            <img
              alt={zone.name}
              className="zone-tab-image"
              src={cdnImage("zones", zone.id)}
            />
            <span className="zone-name">{zone.name}</span>
          </button>
        );
      })}
    </div>
  );
};

export { ZoneSelector };