"use client" import { useState, useEffect } from "react"import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" interface LibraryNote {  id: string  date: string  title: string  content: string} export function LibraryNotesContent() {  const [notes, setNotes] = useState<LibraryNote[]>([])  const [error, setError] = useState<string | null>(null)   useEffect(() => {    fetch("/api/library-notes")      .then((response) => {        if (!response.ok) {          throw new Error(`HTTP error! status: ${response.status}`)        }        return response.json()      })      .then((data) => {        if (!data.notes || !Array.isArray(data.notes)) {          throw new Error("Invalid data structure")        }        setNotes(data.notes.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()))      })      .catch((error) => {        console.error("Error loading library notes data:", error)        setError(`Failed to load library notes data: ${error.message}`)      })  }, [])   if (error) {    return <div className="text-red-600 dark:text-red-400">{error}</div>  }   if (notes.length === 0) {    return <div className="text-gray-600 dark:text-gray-400">Loading library notes data...</div>  }   return (    <div className="space-y-6">      {notes.map((note) => (        <Card key={note.id}>          <CardHeader>            <CardTitle>{note.title}</CardTitle>          </CardHeader>          <CardContent>            <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">{new Date(note.date).toLocaleDateString()}</p>            <p className="text-sm">{note.content}</p>          </CardContent>        </Card>      ))}    </div>  )}