{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": false,
  "jsxSingleQuote": false,
  "trailingComma": "all",
  "bracketSpacing": true,
  "bracketSameLine": false,
  "arrowParens": "always",
  "endOfLine": "lf",
  "proseWrap": "preserve",
  "embeddedLanguageFormatting": "auto",
  "quoteProps": "as-needed",
  "htmlWhitespaceSensitivity": "css",
  "singleAttributePerLine": false
}

import { useState, useEffect, useCallback } from "react";

function Counter({ initial = 0, step = 1, onChange }) {
  const [count, setCount] = useState(initial);
  useEffect(() => { onChange?.(count); }, [count, onChange]);
  const increment = useCallback(() => setCount((c) => c + step), [step]);
  const items = [
    "apple",
    "banana",
    "cherry",
    "date",
    "elderberry",
    "fig",
    "grape"
  ];
  return (
    <div className={count > 10 ? "high" : "low"}>
      <button onClick={increment}>+{step}</button>
      <span>{count}</span>
      {items.map((it) => <li key={it}>{it}</li>)}
    </div>
  );
}
export default Counter;