"use client";

import Link from "next/link";

type Genre = { id: number; name: string };

export default function GenreList({ items }: { items: Genre[] }) {
  return (
    <div>
      <h1>Genres</h1>
      <ul className="list-group">
        {items.map((g) => (
          <li key={g.id} className="list-group-item d-flex justify-content-between align-items-center">
            <Link href={`/zxdb/genres/${g.id}`}>{g.name}</Link>
            <span className="badge text-bg-light">#{g.id}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}