import { Link } from '@inertiajs/react';

export type PublicRoomAmenity = {
    icon: string;
    label: string;
};

export type PublicRoom = {
    name: string;
    slug: string;
    summary: string;
    description: string;
    occupancy: number | null;
    bedConfiguration: string;
    nightlyRate: string;
    nightlyRateUsd: string | null;
    featuredImage: string;
    gallery: string[];
    amenities: PublicRoomAmenity[];
    houseRules: string[];
    units: { number: string; floor: string }[];
    unitLabel: string;
    floorLabel: string;
    href: string;
};

type RoomCardProps = {
    room: PublicRoom;
    delay?: string;
};

export function RoomCard({ room, delay = '.3s' }: RoomCardProps) {
    const price = room.nightlyRateUsd ? `${room.nightlyRate} · ${room.nightlyRateUsd}` : room.nightlyRate;

    return (
        <div className="room-item wow fadeInUp" data-wow-delay={delay}>
            <div className="room-image">
                <Link href={room.href}>
                    <figure className="image-anime">
                        <img src={room.featuredImage} alt={room.name} />
                    </figure>
                </Link>
                {room.amenities.length > 0 && (
                    <div className="room-overlay">
                        <div className="room-facilities">
                            <ul>
                                {room.amenities.slice(0, 5).map((amenity) => (
                                    <li key={amenity.label}>
                                        <i className={amenity.icon}></i>
                                    </li>
                                ))}
                            </ul>
                        </div>
                    </div>
                )}
            </div>
            <div className="room-content">
                <div className="room-content-top">
                    <h2 className="line-anime">
                        <Link href={room.href}>{room.name}</Link>
                    </h2>
                    {room.summary !== '' && <p>{room.summary}</p>}
                </div>
                <div className="room-content-bottom">
                    <div className="room-price">
                        <p>{price}</p>
                    </div>
                    <div className="room-button-wapper">
                        <Link href={room.href} className="theme-button style-1" aria-label="Room Details">
                            Room Details
                        </Link>
                    </div>
                </div>
            </div>
        </div>
    );
}