export type MapToggleState = {
  pairLines: boolean;
  pairRange: boolean;
  fcLines: boolean;
  zones: boolean;
  fleetCircles: boolean;
  predictVectors: boolean;
  shipLabels: boolean;
  subcables: boolean;
};

type Props = {
  value: MapToggleState;
  onToggle: (key: keyof MapToggleState) => void;
};

export function MapToggles({ value, onToggle }: Props) {
  const items: Array<{ id: keyof MapToggleState; label: string }> = [
    { id: "pairLines", label: "쌍 연결선" },
    { id: "pairRange", label: "쌍 연결범위" },
    { id: "fcLines", label: "환적 연결선" },
    { id: "fleetCircles", label: "선단 범위" },
    { id: "zones", label: "수역 표시" },
    { id: "predictVectors", label: "예측 벡터" },
    { id: "shipLabels", label: "선박명 표시" },
    { id: "subcables", label: "해저케이블" },
  ];

  return (
    <div className="tog tog-map">
      {items.map((t) => (
        <div key={t.id} className={`tog-btn ${value[t.id] ? "on" : ""}`} onClick={() => onToggle(t.id)}>
          {t.label}
        </div>
      ))}
    </div>
  );
}