import { Link, Outlet, useLoaderData } from 'react-router-dom';

import { getTodos } from '../data/todos';

function Todos() {
  const todos = useLoaderData();

  let content = (
    <main>
      <h1>Nie znaleziono żadnych zadań</h1>
      <p>Zacznij je dodawać!</p>
      <p>
        <Link className="btn-cta" to="/new">
          Dodaj zadanie
        </Link>
      </p>
    </main>
  );

  if (todos && todos.length > 0) {
    content = (
      <main>
        <section>
          <Link className="btn-cta" to="/new">
            Dodaj zadanie
          </Link>
        </section>
        <ul id="todos">
          {todos.map((todo) => (
            <li key={todo.id}>
              <Link to={todo.id}>{todo.text}</Link>
            </li>
          ))}
        </ul>
      </main>
    );
  }

  return (
    <>
      {content}
      <Outlet />
    </>
  );
}

export default Todos;

export function loader() {
  return getTodos();
}
