src/pages/index.tsx

import React, { useState, useEffect } from "react";
import { ProviderInfo, ModelData, CalendarData } from "../types/heatmap";
import ProviderSummary from "../components/ProviderSummary";
import HeatmapGrid from "../components/HeatmapGrid";
import CTASection from "../components/CTASection";
import { getProviders } from "../utils/ranking";
import { ORGANIZATIONS } from "../constants/organizations";

interface PageProps {
  calendarData: CalendarData;
  providers: ProviderInfo[];
}

function Page({
  calendarData,
  providers,
}: PageProps) {
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    if (calendarData && Object.keys(calendarData).length > 0) {
      setIsLoading(false);
    }
  }, [calendarData]);


  return (
    <div className="w-full p-4 py-16 relative">
      <h1 className="text-3xl lg:text-5xl mt-16 font-bold text-center mb-2 text-foreground">
        Hugging Face Heatmap 🤗
      </h1>
      <div className="text-center text-sm my-8 space-y-4">
        <p className="text-muted-foreground">
          Open models, datasets, and apps from the top AI labs in the last year.
        </p>
      </div>

      <div className="mb-16 mx-auto">
        <div className="overflow-x-auto scrollbar-hide">
          <div className="flex gap-6 px-4 py-2 min-w-max justify-center">
            {providers.map((provider, index) => (
              <ProviderSummary
                key={provider.fullName || provider.authors[0]}
                provider={provider}
                calendarData={calendarData}
                rank={index + 1}
              />
            ))}
          </div>
        </div>
      </div>
           
      <HeatmapGrid 
        sortedProviders={providers}
        calendarData={calendarData}
        isLoading={isLoading}
      />
      
      <CTASection />
    </div>
  );
}


export async function getStaticProps() {
  try {
    const { calendarData, providers } = await getProviders(ORGANIZATIONS);

    return {
      props: {
        calendarData,
        providers,
      },
      revalidate: 3600, // regenerate every hour
    };
  } catch (error) {
    console.error("Error fetching data:", error);
    return {
      props: {
        calendarData: {},
        providers: ORGANIZATIONS,
      },
      revalidate: 60, // retry after 1 minute if there was an error
    };
  }
}

export default Page;