detailoan

import React, { useState, useEffect } from "react";
import { useParams, Link } from "react-router-dom";
import Sidebar from "../components/Sidebar";
import Navbar from "../components/Navbar";
import "./BorrowedDetail.css";
import { BASE_URL } from "../server/Endpoint";
import Footer from "../components/Footer";

const BorrowedDetail = () => {
  const { loanId } = useParams();
  const [loanDetail, setLoanDetail] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchLoanDetail = async () => {
      try {
        const token = localStorage.getItem("token");
        const response = await fetch(
          `${BASE_URL}api/staff-member/loans/getLoan/${loanId}`,
          {
            method: "GET",
            headers: {
              "ngrok-skip-browser-warning": "69420",
              Authorization: `Bearer ${token}`,
            },
          }
        );
        if (!response.ok) {
          throw new Error("Network response was not ok");
        }
        const data = await response.json();
        setLoanDetail(data);
      } catch (error) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    };

    fetchLoanDetail();
  }, [loanId]);

  if (loading) {
    return <div className="bd-loading">Loading...</div>;
  }

  if (error) {
    return <div className="bd-error">Error: {error}</div>;
  }

  return (
    <div className="bd-container">
      <Navbar />
      <div className="bd-content">
        <Sidebar />
        <div className="bd-main">
          <Link to="/borrowbook" className="back">
            <span>Back</span>
          </Link>
          <h2>Loan Detail</h2>
          {loanDetail && (
            <div className="bd-info">
              <div className="bd-image-section">
                <img
                  src={loanDetail.copyBookCover}
                  alt={loanDetail.copyBookTitle}
                />
              </div>
              <div className="bd-content-section">
                <div className="bd-book-info">
                  <h3>Book Information</h3>
                  <p>
                    <strong>Book Title: </strong> {loanDetail.copyBookTitle}
                  </p>
                  <p>
                    <strong>Book ID: </strong> {loanDetail.copyBookId}
                  </p>
                  <p>
                    <strong>Book Description: </strong>{" "}
                    {loanDetail.copyBookDescription}
                  </p>
                  <p>
                    <strong>Publication Year:</strong>{" "}
                    {loanDetail.copyBookPublishYear}
                  </p>
                </div>
                <div className="bd-member-loan">
                  <div className="bd-member-info">
                    <h3>User Information</h3>
                    <p>
                      <strong>User Name: </strong> {loanDetail.userFullName}
                    </p>
                    <p>
                      <strong>id: </strong> {loanDetail.userId}
                    </p>
                    <p>
                      <strong>Gender:</strong> {loanDetail.userGender}
                    </p>
                    <p>
                      <strong>Email: </strong> {loanDetail.userEmail}
                    </p>
                    <p>
                      <strong>Phone Number: </strong>{" "}
                      {loanDetail.userPhoneNumber}
                    </p>
                    <p>
                      <strong>Address: </strong> {loanDetail.userAddress}
                    </p>
                  </div>
                  <div className="bd-loan-dates">
                    <h3>Loan Information</h3>
                    <p>
                      <strong>Loan Date: </strong>{" "}
                      {new Date(loanDetail.loanDate).toLocaleDateString()}
                    </p>
                    <p>
                      <strong>Return Date: </strong>{" "}
                      {new Date(loanDetail.returnDate).toLocaleDateString()}
                    </p>
                    <p>
                      <strong>Status: </strong> {loanDetail.status}
                    </p>
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
      <Footer />
    </div>
  );
};

export default BorrowedDetail;