export const PRESETS: { id: string; label: string; slots: number }[] = [
  { id: "1", label: "1", slots: 1 },
  { id: "2lr", label: "2↔", slots: 2 },
  { id: "2tb", label: "2↕", slots: 2 },
  { id: "2+1", label: "2+1", slots: 3 },
  { id: "1+2", label: "1+2", slots: 3 },
  { id: "3", label: "3", slots: 3 },
  { id: "2x2", label: "2×2", slots: 4 },
  { id: "4", label: "4", slots: 4 },
  { id: "2x3", label: "2×3", slots: 6 },
  { id: "2x4", label: "2×4", slots: 8 },
];

import { COLORS, FONT } from "./theme";

export function PresetPicker({ selected, onSelect }: { selected: string; onSelect: (id: string) => void }) {
  return (
    <div style={{ display: "flex", gap: 4, flexWrap: "wrap" }}>
      {PRESETS.map((p) => {
        const on = p.id === selected;
        return (
          <button key={p.id} onClick={() => onSelect(p.id)}
            style={{
              display: "flex", alignItems: "center", height: 24, padding: "0 8px", borderRadius: 6, fontFamily: FONT.mono, fontSize: 12,
              background: on ? COLORS.bgElevated : "transparent",
              border: `1px solid ${on ? COLORS.borderStrong : "transparent"}`,
              color: on ? COLORS.textPrimary : COLORS.textSecondary,
            }}>
            {p.label}
          </button>
        );
      })}
    </div>
  );
}