import React from 'react';
import { Link } from 'react-router-dom'; // Import Link
import './MyRentals.css';

function MyRentals() {
    const rentals = [
        {
            id: 1,
            title: 'Cozy Apartment in Downtown',
            location: '123 Main St, Cityville',
            checkin: '2024-05-01',
            checkout: '2024-05-07',
            status: 'Confirmed'
        },
        {
            id: 2,
            title: 'Luxury Condo with Ocean View',
            location: '456 Ocean Ave, Beach City',
            checkin: '2024-06-10',
            checkout: '2024-06-17',
            status: 'Pending'
        },
        {
            id: 3,
            title: 'Modern Loft in Arts District',
            location: '789 Art Lane, Culturetown',
            checkin: '2024-07-01',
            checkout: '2024-07-08',
            status: 'Completed'
        }
    ];

    return (
        <div className="my-rentals-page">
            <Link to="/" className="back-to-home-button">
                Back to Home
            </Link>
            <h1>My Rentals</h1>
            <div className="rentals-list">
                {rentals.map((rental) => (
                    <div key={rental.id} className="rental-item">
                        <h3>{rental.title}</h3>
                        <p>Location: {rental.location}</p>
                        <p>Check-in: {rental.checkin}</p>
                        <p>Check-out: {rental.checkout}</p>
                        <p>Status: {rental.status}</p>
                    </div>
                ))}
            </div>
        </div>
    );
}

export default MyRentals;