import Link from 'next/link'
import React from 'react'

import { PaginationNav } from '@/components/PaginationNav'

type ChapterListItem = {
  id: string | number
  title: string
  slug: string
  chapterNumber: number
  publishedAt?: string | null
}

type ChapterListProps = {
  storySlug: string
  chapters: ChapterListItem[]
  totalDocs: number
  currentPage: number
  totalPages: number
}

export const ChapterList: React.FC<ChapterListProps> = ({
  storySlug,
  chapters,
  totalDocs,
  currentPage,
  totalPages,
}) => {
  return (
    <div className="container py-6">
      <h2 className="text-lg font-semibold mb-4">Danh sách chương ({totalDocs})</h2>

      <div className="border border-border rounded-lg overflow-hidden">
        {chapters.length === 0 ? (
          <div className="px-4 py-10 text-center text-sm text-muted-foreground">
            Chưa có chương nào.
          </div>
        ) : (
          chapters.map((chapter) => (
            <Link
              key={String(chapter.id)}
              href={`/truyen/${storySlug}/${chapter.slug}`}
              className="flex items-center justify-between px-4 py-3 hover:bg-accent transition-colors border-b border-border last:border-0"
            >
              <span className="text-sm font-medium">
                Chương {chapter.chapterNumber}: {chapter.title}
              </span>
              {chapter.publishedAt && (
                <span className="text-xs text-muted-foreground flex-shrink-0 ml-4">
                  {new Date(chapter.publishedAt).toLocaleDateString('vi-VN')}
                </span>
              )}
            </Link>
          ))
        )}
      </div>

      <PaginationNav
        page={currentPage}
        totalPages={totalPages}
        basePath={`/truyen/${storySlug}`}
      />
    </div>
  )
}