"use client" import { useState, useEffect } from "react"import { BookCard } from "./book-card" interface Book {  id: string  title: string  author: string  coverUrl: string  classification: string  subClassification: string} export function LibrarySection() {  const [books, setBooks] = useState<Book[]>([])  const [error, setError] = useState<string | null>(null)   useEffect(() => {    fetch("/api/library")      .then((response) => {        if (!response.ok) {          throw new Error(`HTTP error! status: ${response.status}`)        }        return response.json()      })      .then((data) => {        if (!data.books || !Array.isArray(data.books)) {          throw new Error("Invalid data structure")        }        setBooks(data.books)      })      .catch((error) => {        console.error("Error loading library data:", error)        setError(`Failed to load library data: ${error.message}`)      })  }, [])   if (error) {    return <div className="text-red-500">{error}</div>  }   if (books.length === 0) {    return <div className="text-gray-600">Loading library data...</div>  }   const groupedBooks = books.reduce(    (acc, book) => {      if (book && book.classification) {        if (!acc[book.classification]) {          acc[book.classification] = []        }        acc[book.classification].push(book)      }      return acc    },    {} as Record<string, Book[]>,  )   return (    <div className="space-y-12">      {Object.entries(groupedBooks).map(([classification, books]) => (        <section key={classification}>          <h2 className="text-xl mb-6">{getClassificationName(classification)}</h2>          <div className="grid grid-cols-2 gap-6">            {books.map((book) => (              <BookCard key={book.id} coverUrl={book.coverUrl} title={book.title} author={book.author} rating={0} />            ))}          </div>        </section>      ))}    </div>  )} function getClassificationName(classification: string): string {  const classifications: Record<string, string> = {    A: "General Works",    B: "Philosophy, Psychology, Religion",    C: "Auxiliary Sciences of History",    D: "World History",    E: "History of the Americas",    F: "History of the Americas",    G: "Geography, Anthropology, Recreation",    H: "Social Sciences",    J: "Political Science",    K: "Law",    L: "Education",    M: "Music",    N: "Fine Arts",    P: "Language and Literature",    Q: "Science",    R: "Medicine",    S: "Agriculture",    T: "Technology",    U: "Military Science",    V: "Naval Science",    Z: "Bibliography, Library Science, Information Resources",  }  return classifications[classification] || "Unknown Classification"}