import React from "react";
import { ProviderInfo, CalendarData } from "../types/heatmap";
import OrganizationCard from "./OrganizationCard";
import ProviderHeatmapSkeleton from "./ProviderHeatmapSkeleton";

interface HeatmapGridProps {
  sortedProviders: ProviderInfo[];
  calendarData: CalendarData;
  isLoading: boolean;
}

const HeatmapGrid: React.FC<HeatmapGridProps> = ({ sortedProviders, calendarData, isLoading }) => {
  if (isLoading) {
    return (
      <div className="flex flex-col gap-8 max-w-4xl mx-auto mb-16">
        {Array.from({ length: 3 }).map((_, idx) => (
          <ProviderHeatmapSkeleton key={idx} />
        ))}
      </div>
    );
  }

  return (
    <div className="flex flex-col gap-8 max-w-4xl mx-auto mb-16">
      {sortedProviders.map((provider, index) => (
        <OrganizationCard 
          key={provider.fullName || provider.authors[0]}
          provider={provider} 
          calendarData={calendarData}
          rank={index + 1}
        />
      ))}
    </div>
  );
};

export default HeatmapGrid;