/**
 * BookDetail component — full book information display.
 */

import type { BookDetail as BookDetailType } from "../types";
import { READING_STATUS_LABELS } from "../types";

interface BookDetailProps {
  book: BookDetailType;
  onBack: () => void;
}

export default function BookDetail({ book, onBack }: BookDetailProps) {
  return (
    <div className="book-detail">
      <button
        type="button"
        className="back-button"
        onClick={onBack}
      >
        <svg
          width="20"
          height="20"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
        >
          <path d="m15 18-6-6 6-6" />
        </svg>
        Back to search
      </button>

      <div className="book-detail-content">
        <div className="book-detail-cover">
          {book.cover_url ? (
            <img src={book.cover_url} alt={`${book.title} cover`} />
          ) : (
            <div className="cover-placeholder large">
              <svg
                width="48"
                height="48"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="1.5"
                strokeLinecap="round"
                strokeLinejoin="round"
              >
                <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
                <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
              </svg>
            </div>
          )}
        </div>

        <div className="book-detail-info">
          <h1 className="book-detail-title">{book.title}</h1>
          <p className="book-detail-author">by {book.author}</p>
          <p className="book-detail-genre">{book.genre}</p>
          <p className="book-detail-status">
            Status:{" "}
            <span className={`status-badge status-${book.reading_status}`}>
              {READING_STATUS_LABELS[book.reading_status]}
            </span>
          </p>

          {book.description && (
            <div className="book-detail-description">
              <h2>Description</h2>
              <p>{book.description}</p>
            </div>
          )}

          <div className="book-detail-meta">
            <p>
              <strong>Added:</strong>{" "}
              {new Date(book.created_at).toLocaleDateString()}
            </p>
            <p>
              <strong>Updated:</strong>{" "}
              {new Date(book.updated_at).toLocaleDateString()}
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}