// src/App.jsx

function Alert({ type, children }) {
  const colors = {
    info: "#1f4068",
    error: "#5a1f1f",
  };

  return (
    <div style={{ background: colors[type], color: "white", padding: "10px", borderRadius: "6px" }}>
      {children}
    </div>
  );
}

function App() {
  return (
    <div>
      <Alert type="info">
        <p>Your changes have been saved.</p>
      </Alert>
      <Alert type="error">
        <p>Something went wrong. Please try again.</p>
      </Alert>
    </div>
  );
}

export default App;

/*
  Notes:
  - colors[type] is the lookup-object pattern from Chapter 5, used
    here to pick a background color based on the type prop.
  - children is rendered exactly as given — Alert doesn't need to know
    it's a <p> specifically, it just wraps whatever was passed in.
*/