import { Link, useLoaderData } from "react-router";
import { listBandLists } from "~/lib/db.server";

export function loader() {
  return { lists: listBandLists() };
}

export default function ListIndex() {
  const { lists } = useLoaderData<typeof loader>();
  return (
    <main>
      <div className="page-header">
        <h1>Lists</h1>
        <Link to="/lists/new">+ List</Link>
      </div>

      {lists.length === 0 ? (
        <p className="muted">
          リストがまだありません。{" "}
          <Link to="/lists/new">作成する</Link>
        </p>
      ) : (
        <ul className="band-list">
          {lists.map((list) => (
            <li key={list.id}>
              <Link to={`/lists/of/${list.id}`}>{list.title}</Link>
              {list.description && (
                <span className="muted" style={{ fontSize: ".75rem" }}>{list.description}</span>
              )}
            </li>
          ))}
        </ul>
      )}
    </main>
  );
}