// src/App.jsx
import { useState } from "react";

function PreferencesForm() {
  const [subscribed, setSubscribed] = useState(false);
  const [country, setCountry] = useState("ie");

  return (
    <div>
      <label>
        <input
          type="checkbox"
          checked={subscribed}
          onChange={(e) => setSubscribed(e.target.checked)}
        />
        Subscribe to newsletter
      </label>

      <select value={country} onChange={(e) => setCountry(e.target.value)}>
        <option value="ie">Ireland</option>
        <option value="hu">Hungary</option>
        <option value="jp">Japan</option>
      </select>

      <p>Subscribed: {subscribed ? "Yes" : "No"}</p>
      <p>Country: {country}</p>
    </div>
  );
}

function App() {
  return <PreferencesForm />;
}

export default App;

/*
  Notes:
  - The checkbox uses checked + e.target.checked (a boolean), not
    value + e.target.value like text inputs.
  - The select uses value + onChange on the <select> element itself,
    exactly the same pattern as a text input, even though the
    individual <option> tags look different from a plain HTML select.
*/