"use client";

import Link from "next/link";

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

export default function LanguageList({ items }: { items: Language[] }) {
  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>
  );
}