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" : ""}`}
        onClick={() => {
          onSelectZone(zone.id);
        }}
        title={zone.description}
        type="button"
      >
        <span className="zone-emoji">{zone.emoji}</span>
        <span className="zone-name">{zone.name}</span>
      </button>
    ))}
  </div>
);
