import { Book } from '@/books/Book';
import data from '@/data/books.json';
import { CloseButton } from './CloseButton';

type PageProps = {
  params: Promise<{ id: string }>;
};

const BookDetailPage = async ({ params }: PageProps) => {
  const { id } = await params;

  const book = (data.books as Book[]).find((b) => b.id === parseInt(id, 10));
  if (!book) return null;

  return (
    <div
      style={{
        position: 'fixed',
        inset: 0,
        background: 'rgba(0,0,0,0.5)',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        zIndex: 1000,
      }}
    >
      <div
        style={{
          background: 'white',
          padding: 20,
          borderRadius: 8,
          width: 300,
        }}
      >
        <h2>{book.title}</h2>
        <p>Author: {book.author}</p>

        <CloseButton />
      </div>
    </div>
  );
};

export default BookDetailPage;
