// src/App.jsx

function Badge({ text, color = "gray" }) {
  return (
    <span style={{ background: color, color: "white", padding: "4px 10px", borderRadius: "12px" }}>
      {text}
    </span>
  );
}

function App() {
  return (
    <div className="app">
      <Badge text="New" color="green" />
      <Badge text="Default Color" />
    </div>
  );
}

export default App;

/*
  Notes:
  - The first Badge passes "green" explicitly, overriding the default.
  - The second Badge omits color entirely, so the default parameter
    value "gray" is used instead — same as default parameters on any
    regular JS function.
*/