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

export function loader() {
  return { artists: listArtists() };
}

export default function ArtistIndex() {
  const { artists } = useLoaderData<typeof loader>();
  return (
    <main>
      <div className="page-header">
        <h1>Artists</h1>
        <Link to="/artists/new">+ Artist</Link>
      </div>

      {artists.length === 0 ? (
        <p className="muted">
          アーティストがまだありません。{" "}
          <Link to="/artists/new">追加する</Link>
        </p>
      ) : (
        <ul className="band-list">
          {artists.map((artist) => (
            <li key={artist.id}>
              <Link to={`/artists/of/${artist.id}`}>{artist.name}</Link>
            </li>
          ))}
        </ul>
      )}
    </main>
  );
}