"use client";

import { useEffect, useState } from "react";
import { Bath, BedDouble, Users } from "lucide-react";
import type { DynamicRoom } from "@/lib/rooms";

export function DynamicRoomCards() {
  const [rooms, setRooms] = useState<DynamicRoom[]>([]);

  useEffect(() => {
    fetch("/api/rooms")
      .then((response) => response.json())
      .then((data: { rooms?: DynamicRoom[] }) => setRooms(data.rooms ?? []))
      .catch(() => setRooms([]));
  }, []);

  if (!rooms.length) {
    return <p className="empty-state">Room information is being updated. Please contact the resort.</p>;
  }

  return (
    <div className="room-grid">
      {rooms.map((room, index) => (
        <article
          className="room-card reveal is-visible"
          key={room.id}
          style={{ transitionDelay: `${index * 80}ms` }}
        >
          <a className="room-detail-link" href={`/rooms/${encodeURIComponent(room.id)}`} aria-label={`View ${room.title}`} />
          <div className="media-box">
            <img src={room.image} alt={room.title} />
            <span>{room.status}</span>
          </div>
          <div className="room-body">
            <p className="room-type">{room.type}</p>
            <h3>{room.title}</h3>
            <p>{room.description}</p>
            <div className="stats">
              <span><Users size={15} /> {room.guests} Guests</span>
              <span><BedDouble size={15} /> {room.beds}</span>
              <span><Bath size={15} /> {room.baths} Bath</span>
            </div>
            <div className="price-row">
              <strong>
                NPR {room.price.toLocaleString()} <small>/ night</small>
              </strong>
              {["Available", "Few Left"].includes(room.status) ? (
                <a href={`/booking?room=${room.id}`}>Book Now</a>
              ) : (
                <small>Unavailable</small>
              )}
            </div>
          </div>
        </article>
      ))}
    </div>
  );
}