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

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

const STATUS_LABEL: Record<string, string> = {
  active: "活動中",
  hiatus: "活動休止",
  disbanded: "解散",
};

export default function Home() {
  const { bands } = useLoaderData<typeof loader>();
  return (
    <main className="max-w-2xl mx-auto px-6 py-12">
      {bands.length === 0 ? (
        <p className="text-gray-600 text-sm">
          バンドがまだありません。{" "}
          <Link to="/bands/new" className="underline">
            追加する
          </Link>
        </p>
      ) : (
        <ul className="divide-y divide-gray-900">
          {bands.map((band) => (
            <li key={band.id} className="py-4 flex items-start justify-between gap-6">
              <div className="min-w-0">
                <Link
                  to={`/bands/of/${band.id}`}
                  className="text-gray-100 hover:text-white font-medium"
                >
                  {band.name}
                </Link>
                {band.description && (
                  <p className="text-gray-500 text-sm mt-0.5 line-clamp-1">
                    {band.description}
                  </p>
                )}
              </div>
              <div className="flex items-center gap-4 text-sm text-gray-500 shrink-0 pt-0.5">
                {band.area && <span>{band.area}</span>}
                <span>{STATUS_LABEL[band.status] ?? band.status}</span>
              </div>
            </li>
          ))}
        </ul>
      )}
    </main>
  );
}