import type { Metadata } from 'next/types'

import configPromise from '@payload-config'
import { getPayload } from 'payload'
import Link from 'next/link'
import React from 'react'

export const revalidate = 600

export default async function Page() {
  const payload = await getPayload({ config: configPromise })

  const tags = await (payload as any).find({
    collection: 'tags',
    sort: 'title',
    limit: 500,
  }).catch(() => ({ docs: [] }))

  return (
    <div className="container py-12">
      <h1 className="text-3xl font-bold mb-8">Tags</h1>
      {tags.docs.length === 0 ? (
        <p className="text-muted-foreground">Chưa có tag nào.</p>
      ) : (
        <div className="flex flex-wrap gap-3">
          {tags.docs.map((tag: any) => (
            <Link
              key={String(tag.id)}
              href={`/tags/${tag.slug}`}
              className="inline-flex items-center px-4 py-2 rounded-full border border-border text-sm font-medium hover:bg-accent hover:border-primary transition-colors"
            >
              {tag.title}
            </Link>
          ))}
        </div>
      )}
    </div>
  )
}

export function generateMetadata(): Metadata {
  return {
    title: 'Tags | Truyện Hay',
    description: 'Danh sách tất cả tags',
  }
}