import type { Zone } from "@elysium/types";

interface ZoneSelectorProps {
  zones: Zone[];
  activeZoneId: string;
  onSelectZone: (zoneId: string) => void;
}

export const ZoneSelector = ({
  zones,
  activeZoneId,
  onSelectZone,
}: ZoneSelectorProps): React.JSX.Element => (
  <div className="zone-selector">
    {zones.map((zone) => (
      <button
        key={zone.id}
        className={`zone-tab ${zone.id === activeZoneId ? "zone-tab-active" : ""} ${zone.status === "locked" ? "zone-tab-locked" : ""}`}
        disabled={zone.status === "locked"}
        onClick={() => {
          onSelectZone(zone.id);
        }}
        title={zone.status === "locked" ? `Unlock by defeating ${zone.unlockBossId?.replace(/_/g, " ") ?? "the previous boss"}` : zone.description}
        type="button"
      >
        <span className="zone-emoji">{zone.emoji}</span>
        <span className="zone-name">{zone.name}</span>
        {zone.status === "locked" && <span className="zone-lock">🔒</span>}
      </button>
    ))}
  </div>
);