"use client";

import { useState, useEffect } from "react";
import { PropertyRequestsCard } from "./propertyRequestsCard";
import { FileSearch } from "lucide-react";

interface PropertyRequestsSlidesProps {
  initialRequests?: any[];
}

export default function PropertyRequestsSlides({ initialRequests }: PropertyRequestsSlidesProps) {
  const [requests] = useState<any[]>(initialRequests || []);

  if (requests.length === 0) {
    return (
      <div className="py-20 flex flex-col items-center justify-center border-2 border-dashed border-gray-200 rounded-3xl bg-gray-50/50">
        <div className="bg-white p-4 rounded-full shadow-sm mb-4">
          <FileSearch className="h-10 w-10 text-gray-400" />
        </div>
        <h3 className="text-xl font-bold text-gray-900 mb-2">لا توجد طلبات جارية</h3>
        <p className="text-gray-500 text-center max-w-xs">
          حالياً لا توجد طلبات عقارية نشطة في هذا القسم. سيتم تحديث القائمة فور وصول طلبات جديدة.
        </p>
      </div>
    );
  }

  return (
    <div className="py-9">
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        {requests.map((property) => (
          <PropertyRequestsCard key={property.id} {...property} />
        ))}
      </div>
    </div>
  );
}