import { useSystems } from "../hooks/useStructures.js";
import { useAtlasStore } from "../store/useAtlasStore.js";

export function LayerToggle() {
  const systems = useSystems();
  const visibleSystems = useAtlasStore((s) => s.visibleSystems);
  const toggleSystem = useAtlasStore((s) => s.toggleSystem);

  return (
    <div className="space-y-1.5">
      <h3 className="text-xs uppercase tracking-wide text-slate-400 mb-2">Camadas</h3>
      {systems.map((sys) => (
        <label
          key={sys.slug}
          className="flex items-center gap-2 text-sm cursor-pointer select-none rounded px-2 py-1 hover:bg-white/5"
        >
          <input
            type="checkbox"
            checked={visibleSystems.has(sys.slug)}
            onChange={() => toggleSystem(sys.slug)}
            className="accent-accent"
          />
          <span
            className="inline-block w-2.5 h-2.5 rounded-full"
            style={{ backgroundColor: sys.colorHex }}
          />
          <span>{sys.namePt}</span>
          {sys._count && (
            <span className="ml-auto text-xs text-slate-500">{sys._count.structures}</span>
          )}
        </label>
      ))}
    </div>
  );
}