export default function App() {
  const user = { id: 7, name: 'Priya', role: 'admin' };

  const { name, role } = user;
  console.log(name, role); // "Priya" "admin"

  // Renaming while destructuring
  const { name: displayName } = user;
  console.log(displayName); // "Priya"

  // Default value for a missing property
  const { theme = 'light' } = user;
  console.log(theme); // "light" (not present on `user`, so default is used)

  return (
    <div>
      <p>name: {name}</p>
      <p>role: {role}</p>
      <p>displayName: {displayName}</p>
      <p>theme: {theme}</p>
      <p>Open the console to see the logged values.</p>
    </div>
  );
}