import React from 'react';
import { useNavigate } from 'react-router-dom';
import './ApartmentList.css';
import apartments from '../../src/storage/apartments.json'; // Импортируйте JSON-файл

function ApartmentList() {
    const navigate = useNavigate();

    const handleBookApartment = (apartmentId) => {
        navigate(`/booking/${apartmentId}`);
    };

    return (
        <div className="apartment-list-container">
            <h1>Available Apartments</h1>
            <div className="apartment-grid">
                {apartments.map(apartment => (
                    <div key={apartment.id} className="apartment-card">
                        <img src={process.env.PUBLIC_URL + apartment.imageUrl} alt={apartment.name} className="apartment-image" />
                        <h2>{apartment.name}</h2>
                        <p>{apartment.description}</p>
                        <p className="apartment-price">{apartment.price}</p>
                        <button onClick={() => handleBookApartment(apartment.id)}>Book Now</button>
                    </div>
                ))}
            </div>
        </div>
    );
}

export default ApartmentList;