import Link from "next/link";

type Chapter = {
  id: number;
  number: number;
  title: string;
};

export function ChapterList({
  chapters,
  mangaSlug,
}: {
  chapters: Chapter[];
  mangaSlug: string;
}) {
  if (chapters.length === 0) {
    return (
      <p className="text-muted text-center py-8">No chapters available yet</p>
    );
  }

  return (
    <div className="space-y-2">
      {chapters.map((ch) => (
        <Link
          key={ch.id}
          href={`/manga/${mangaSlug}/${ch.number}`}
          scroll={false}
          className="flex items-center justify-between px-4 py-3 bg-surface rounded-xl hover:bg-surface-hover active:scale-[0.98] transition-all"
        >
          <div className="flex items-center gap-3 min-w-0">
            <span className="text-accent font-bold text-sm tabular-nums shrink-0">
              #{ch.number}
            </span>
            <span className="text-sm font-medium truncate">{ch.title}</span>
          </div>
          <svg
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth={2}
            className="w-4 h-4 text-muted shrink-0"
          >
            <polyline points="9 18 15 12 9 6" />
          </svg>
        </Link>
      ))}
    </div>
  );
}