const people = [
  { name: 'Bob', last: 'Johnson', age: 30 },
  { name: 'Charlie', last: 'Brown', age: 25 },
  { name: 'David', last: 'Williams', age: 35 },
  { name: 'Alice', last: 'Smith', age: 28 },
  { name: 'Eve', last: 'Davis', age: 22 },
  { name: 'Frank', last: 'Miller', age: 40 },
];

const buttonName = document.getElementById('sort-by-name');
const buttonLast = document.getElementById('sort-by-last');
const buttonAge = document.getElementById('sort-by-age');

// Helpers
const pipe =
  (...functions) =>
  (value) => {
    return functions.reduce((acc, fn) => fn(acc), value);
  };

const render = (listItems) => {
  const ul = document.getElementById('people-list');
  ul.innerHTML = listItems.join('');
};

// Exercise helpers

const compareByName = (a, b) => a.name.localeCompare(b.name);
const compareByLast = (a, b) => a.last.localeCompare(b.last);
const compareByAge = (a, b) => a.age - b.age;

const sortPeopleBy = /* ... PLACEHOLDER ... */ () => {};

const peopleToString = (people) => {
  return 'PLACEHOLDER';
};

const peopleToListItems = (strings) => 'PLACEHOLDER';

// Main

const byname = /* ... PLACEHOLDER ... */ undefined;

const bylast = /* ... PLACEHOLDER ... */ undefined;

const byage = /* ... PLACEHOLDER ... */ undefined;

buttonName.addEventListener('click', () => undefined);
buttonLast.addEventListener('click', () => undefined);
buttonAge.addEventListener('click', () => undefined);

render(['<li>a</li>', '<li>b</li>', '<li>c</li>']);