import React, { useEffect, useState } from "react";
import axios from "axios";
import styles from "../../stylesheets/[Link]"; // Use CSS Module
function AllBook() {
const [books, setBooks] = useState([]);
const [page, setPage] = useState(1);
const pageSize = 10;
const [totalCount, setTotalCount] = useState(0);
const totalPages = [Link](totalCount / pageSize);
const fetchBooks = async () => {
try {
const res = await [Link](
`[Link]
);
setBooks([Link]);
setTotalCount([Link]);
} catch (err) {
[Link]("Error fetching books:", err);
}
};
useEffect(() => {
fetchBooks();
}, [page]);
return (
<div className={[Link]}>
<h2>
All Books (Page {page} of {totalPages})
</h2>
<div className={[Link]}>
{[Link]((book) => (
<div key={[Link]} className={[Link]}>
<div>
<img src={[Link]} alt={[Link]} />
</div>
<div>
<p>4.3*</p>
<h3>{[Link]}</h3>
<p>by {[Link]}</p>
<p>₹{[Link]}</p>
{/* <p>{[Link]}</p> */}
{/* <p className={[Link]}>Genres: {[Link]}</p> */}
</div>
<div className="add-to-cart">
<button>Add to Cart</button>
</div>
</div>
))}
</div>
<div className={[Link]}>
<button
onClick={() => setPage((p) => [Link](p - 1, 1))}
disabled={page === 1}
>
« Prev
</button>
{[...Array(totalPages)].map((_, i) => (
<button
key={i + 1}
onClick={() => setPage(i + 1)}
className={page === i + 1 ? [Link] : ""}
>
{i + 1}
</button>
))}
<button
onClick={() => setPage((p) => [Link](p + 1, totalPages))}
disabled={page === totalPages}
>
Next »
</button>
</div>
</div>
);
}
export default AllBook;