'use client';

import { useEffect, useState } from 'react';
import { PropertyProjectCard } from "./propertyProjectCard";
// import { mockProperties } from "../../mockData/PropertyProject";
import { getPremiumProjects } from "@/lib/api";

export default function PropertyProjectSlides({ initialProjects, children }: { initialProjects?: any[], children?: React.ReactNode }) {
  const [projects, setProjects] = useState<any[]>(initialProjects || []);
  const [loading, setLoading] = useState(!initialProjects || initialProjects.length === 0);

  useEffect(() => {
    // If we already have initialProjects from SSR, don't fetch again unless needed
    if (initialProjects && initialProjects.length > 0) {
      setProjects(initialProjects);
      setLoading(false);
      return;
    }

    async function fetchProjects() {
      try {
        const data = await getPremiumProjects();
        if (data && data.length > 0) {
          setProjects(data);
        } else {
          setProjects([]);
        }
      } catch (error) {
        console.error("Failed to fetch premium projects, using fallback:", error);
        setProjects([]);
      } finally {
        setLoading(false);
      }
    }

    fetchProjects();
  }, [initialProjects]);

  // Show nothing or skeleton while loading? 
  // For now, let's just show the grid once decided.
  // Or purely fallback to mockProperties immediately if we want SSR-like feel (but we are client-side now).

  if (loading) {
    // Optional: Return a loading state or just render mockProperties initially to avoid layout shift?
    // Let's render mockProperties initially if we prefer "optimistic" UI, but typically loading spinner or skeleton is better.
    // Given the requirement "UI Stability", showing mockProperties immediately might be safer to prevent empty flash.
    // However, `useState(mockProperties)` would solve that but might flicker if API returns DIFFERENT data.
    // Let's stick to standard loading -> data flow.
    return (
      <div className="py-9">
        <div className="grid 2xl:grid-cols-3 xl:grid-cols-3 lg:grid-cols-2 md:grid-cols-2 sm:grid-cols-1 gap-6">
          {[1, 2, 3].map((i) => (
            <div key={i} className="h-[400px] w-full bg-gray-100 animate-pulse rounded-2xl"></div>
          ))}
        </div>
      </div>
    );
  }

  const displayProjects = projects;

  return (
    <div className="py-9">
      <div className="grid 2xl:grid-cols-3 xl:grid-cols-3 lg:grid-cols-2 md:grid-cols-2 sm:grid-cols-1 gap-6">
        {children ? <>{children}</> : <>{displayProjects.map((property: any) => (
          <PropertyProjectCard key={property.id} {...property} />
        ))}</>}
      </div>
    </div>
  );
}