"use client"

import Link from "next/link"
import { ChevronRight } from "lucide-react"
import { Part } from "@/lib/book-data"

interface TableOfContentsProps {
  parts: Part[]
}

export function TableOfContents({ parts }: TableOfContentsProps) {
  return (
    <section className="py-16 px-4">
      <div className="max-w-2xl mx-auto">
        {/* Section title */}
        <h2 className="text-gray-400 text-sm mb-8">全书 {parts.length} 篇</h2>

        {/* Parts list */}
        <div className="space-y-6">
          {parts.map((part) => (
            <Link key={part.id} href={`/chapters?part=${part.id}`} className="block group">
              <div className="bg-[#0f2137]/60 backdrop-blur-md rounded-xl p-6 border border-transparent hover:border-[#38bdac]/30 transition-all duration-300">
                <div className="flex items-start justify-between">
                  <div className="flex gap-4">
                    <span className="text-[#38bdac] font-mono text-lg">{part.number}</span>
                    <div>
                      <h3 className="text-white text-xl font-semibold mb-1 group-hover:text-[#38bdac] transition-colors">
                        {part.title}
                      </h3>
                      <p className="text-gray-400">{part.subtitle}</p>
                      <p className="text-gray-500 text-sm mt-2">
                        {part.chapters.length} 章 · {part.chapters.reduce((acc, c) => acc + c.sections.length, 0)} 节
                      </p>
                    </div>
                  </div>
                  <ChevronRight className="w-5 h-5 text-gray-500 group-hover:text-[#38bdac] transition-colors" />
                </div>
              </div>
            </Link>
          ))}
        </div>

        {/* Additional content */}
        <div className="mt-8 pt-8 border-t border-gray-700/50">
          <div className="grid grid-cols-2 gap-4">
            <Link href="/chapters?section=preface" className="block group">
              <div className="bg-[#0f2137]/40 backdrop-blur-md rounded-xl p-4 border border-transparent hover:border-[#38bdac]/30 transition-all">
                <p className="text-gray-400 text-sm">序言</p>
                <p className="text-white group-hover:text-[#38bdac] transition-colors">
                  为什么我每天早上6点在Soul开播?
                </p>
              </div>
            </Link>
            <Link href="/chapters?section=epilogue" className="block group">
              <div className="bg-[#0f2137]/40 backdrop-blur-md rounded-xl p-4 border border-transparent hover:border-[#38bdac]/30 transition-all">
                <p className="text-gray-400 text-sm">尾声</p>
                <p className="text-white group-hover:text-[#38bdac] transition-colors">努力不是关键,选择才是</p>
              </div>
            </Link>
          </div>
        </div>
      </div>
    </section>
  )
}