"use client";

import { useEffect, useState } from "react";
import Link from "next/link";

type Language = { id: string; name: string };

export default function LanguageList() {
  const [items, setItems] = useState<Language[]>([]);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    async function load() {
      try {
        const res = await fetch("/api/zxdb/languages", { cache: "no-store" });
        const json = await res.json();
        setItems(json.items ?? []);
      } finally {
        setLoading(false);
      }
    }
    load();
  }, []);

  if (loading) return <div>Loading…</div>;
  return (
    <div>
      <h1>Languages</h1>
      <ul className="list-group">
        {items.map((l) => (
          <li key={l.id} className="list-group-item d-flex justify-content-between align-items-center">
            <Link href={`/zxdb/languages/${l.id}`}>{l.name}</Link>
            <span className="badge text-bg-light">{l.id}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}