gc-wing/apps/web/src/features/mapToggles/MapToggles.tsx

import { ToggleButton } from '@wing/ui';

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="flex flex-wrap gap-1">
      {items.map((t) => (
        <ToggleButton
          key={t.id}
          on={value[t.id]}
          onClick={() => onToggle(t.id)}
          className="flex-[1_1_calc(25%-4px)] overflow-hidden text-center text-ellipsis whitespace-nowrap"
        >
          {t.label}
        </ToggleButton>
      ))}
    </div>
  );
}