porridger/front/src/components/AnnouncementDetails.jsx

import { Modal, Button } from 'react-bootstrap'
import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet'

import { categoryNames } from '../assets/category'
import { useBook } from '../hooks/api'

function AnnouncementDetails({ close, announcement: { id, name, category, bestBy, description, lat, lng, address, metro } }) {
    const {handleBook, status: bookStatus} = useBook(id)

    return (
        <div
            className="modal show"
            style={{ display: 'flex', position: 'initial', alignItems: "center" }}
        >
            <Modal.Dialog style={{minWidth: "50vw"}}>
                <Modal.Header closeButton onHide={close}>
                    <Modal.Title>
                        Подробнее
                    </Modal.Title>
                </Modal.Header>

                <Modal.Body>
                    <h1>{name}</h1>

                    <span>{categoryNames.get(category)}</span>
                    <span className='m-2'>&#x2022;</span>{/* dot */}
                    <span>Годен до {new Date(bestBy).toLocaleString('ru-RU')}</span>

                    <p className='mb-3'>{description}</p>

                    <MapContainer style={{ width: "100%", minHeight: 300 }} center={[lat, lng]} zoom={16} >
                        <TileLayer
                            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                        />

                        <Marker position={[lat, lng]}>
                            <Popup>{address + "\n" + metro}</Popup>
                        </Marker>
                    </MapContainer>
                </Modal.Body>

                <Modal.Footer>
                    <Button variant='success' onClick={handleBook}>
                        {bookStatus || "Забронировать"} 
                    </Button>
                </Modal.Footer>
            </Modal.Dialog>
        </div>
    )
}

export default AnnouncementDetails