import { TGU_2D_MAP_LAYERS, type Tgu2DMapLayersState } from "./model/mapLayerTypes";

type Tgu2DMapToolbarProps = {
  satelliteLabel: string;
  intervalLabel: string;
  layers: Tgu2DMapLayersState;
  onRefresh: () => void;
  onToggleLayer: (key: keyof Tgu2DMapLayersState) => void;
};

export function Tgu2DMapToolbar({
  satelliteLabel,
  intervalLabel,
  layers,
  onRefresh,
  onToggleLayer
}: Tgu2DMapToolbarProps) {
  return (
    <div className="tgu-map-toolbar">
      <div>
        <div className="tgu-map-toolbar__title">Карта</div>
        <div className="tgu-map-toolbar__subtitle">
          {satelliteLabel} · {intervalLabel}
        </div>
      </div>
      <div className="tgu-map-toolbar__toggles">
        {TGU_2D_MAP_LAYERS.map((layer) => (
          <button
            className={layers[layer.key] ? "is-active" : ""}
            type="button"
            key={layer.key}
            onClick={() => onToggleLayer(layer.key)}
          >
            {layer.label}
          </button>
        ))}
      </div>
      <button className="tgu-button" type="button" onClick={onRefresh}>
        Перерисовать
      </button>
    </div>
  );
}