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

export function loader() {
  return { bands: listBands() };
}

export default function Home() {
  const { bands } = useLoaderData<typeof loader>();
  return (
    <main className="max-w-3xl mx-auto px-4 py-8">
      <div className="flex items-center justify-between mb-6">
        <h1 className="text-xl font-semibold">Bands</h1>
        <Link to="/bands/new" className="text-sm text-blue-400 hover:text-blue-300">
          + New Band
        </Link>
      </div>
      {bands.length === 0 ? (
        <p className="text-gray-400">
          まだバンドがありません。{" "}
          <Link to="/bands/new" className="text-blue-400 hover:text-blue-300">
            追加する
          </Link>
        </p>
      ) : (
        <ul className="divide-y divide-gray-800">
          {bands.map((band) => (
            <li key={band.id} className="py-3">
              <Link
                to={`/bands/of/${band.id}`}
                className="flex items-baseline gap-3 group"
              >
                <span className="font-medium group-hover:text-blue-300 transition-colors">
                  {band.name}
                </span>
                {band.area && (
                  <span className="text-gray-400 text-sm">{band.area}</span>
                )}
              </Link>
            </li>
          ))}
        </ul>
      )}
    </main>
  );
}