import { RoomCard, type PublicRoom } from '@frontend/components/rooms/RoomCard';
import { Link } from '@inertiajs/react';

type HomeRoomsProps = {
    rooms: PublicRoom[];
};

export function HomeRooms({ rooms }: HomeRoomsProps) {
    return (
        <>
                <section className="room-section-2 pt-100 md-pt-80 pb-100 md-pb-80">
                    <div className="container">
                        <div className="row">
                            <div className="col-lg-12">
                                <div className="section-title text-center wow fadeInUp" data-wow-delay=".2s">
                                    <span className="sub-title">Our Room &amp; Suites</span>
                                    <h2>Book your stay and relax in luxury resort</h2>
                                </div>
                            </div>
                        </div>
                        <div className="row">
                            {rooms.map((room, index) => (
                                <div className="col-xl-4 col-lg-6 col-md-6 col-sm-12" key={room.slug}>
                                    <RoomCard room={room} delay={`.${Math.min(index + 3, 8)}s`} />
                                </div>
                            ))}
                        </div>
                        <div className="row">
                            <div className="col-lg-12">
                                <div className="more-room-content wow fadeInUp" data-wow-delay=".9s">
                                    <p>At our hotel, luxury is more than just a word it's a tradition. From exquisite design to personalized service, every detail is thoughtfully curated to create unforgettable experiences.</p>
                                    <div className="rooms-button-wapper">
                                        <Link href="/rooms" className="theme-button style-1" aria-label="Browse All Rooms">
                                            Browse All Rooms
                                        </Link>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
        </>
    );
}