// Button.jsx – a presentational button that rarely needs to re‑render
import React from "react";

const Button = React.memo(({ label, onClick, disabled = false }) => {
  console.log(`Rendering Button: ${label}`); // for demo; remove in prod
  return (
    <button onClick={onClick} disabled={disabled} className="btn">
      {label}
    </button>
  );
});

export default Button;

// App.jsx – demonstrates usage
import React, { useState, useCallback } from "react";
import Button from "./Button";

export default function App() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState("");

  // Stable reference thanks to useCallback
  const handleIncrement = useCallback(() => setCount(c => c + 1), []);

  return (
    <div className="app">
      <h1>Counter: {count}</h1>
      <Button label="Increment" onClick={handleIncrement} />
      {/* This button receives a changing prop (name) – will re‑render on each keystroke */}
      <Button label={`Hello, ${name}`} onClick={() => alert(name)} />
      <input
        value={name}
        onChange={e => setName(e.target.value)}
        placeholder="Enter name"
      />
    </div>
  );
}