import { ToggleButton } from '@wing/ui';
import type { Map3DSettings } from "../../widgets/map3d/Map3D";

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

export function Map3DSettingsToggles({ value, onToggle }: Props) {
  const items: Array<{ id: keyof Map3DSettings; label: string }> = [
    { id: "showShips", label: "선박(Deck)" },
    { id: "showDensity", label: "밀도(3D)" },
    { id: "showSeamark", label: "OpenSeaMap" },
  ];

  return (
    <div className="flex flex-wrap gap-0.75 mb-1.5">
      {items.map((t) => (
        <ToggleButton key={t.id} on={value[t.id]} onClick={() => onToggle(t.id)}>
          {t.label}
        </ToggleButton>
      ))}
    </div>
  );
}