import React from "react";

export default function ToggleButton({ label, active, onClick, color }) {
  return (
    <button
      onMouseDown={(e) => { e.preventDefault(); onClick(); }}
      title={label}
      style={{
        background: active ? color + "22" : "transparent",
        border: `1px solid ${active ? color + "66" : "transparent"}`,
        borderRadius: 3,
        padding: "1px 4px",
        cursor: "pointer",
        fontFamily: "inherit",
        fontSize: 11,
        fontWeight: 600,
        color: active ? color : "var(--text-dim)",
        lineHeight: 1.3,
        transition: "all 0.15s",
      }}
    >
      {label}
    </button>
  );
}
