src/components/HeatmapGrid.tsx

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

type ViewMode = 'daily' | 'weekly';

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

const HeatmapGrid: React.FC<HeatmapGridProps> = ({ sortedProviders, calendarData, isLoading }) => {
  const [viewMode, setViewMode] = useState<ViewMode>('weekly');

  // Memoize the toggle handler to prevent unnecessary re-renders
  const handleViewModeToggle = useCallback((newMode: ViewMode) => {
    setViewMode(newMode);
  }, []);

  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">
      {/* View Toggle */}
      <div className="flex justify-center">
        <ViewToggle
          viewMode={viewMode}
          onToggle={handleViewModeToggle}
        />
      </div>

      {/* Heatmap Cards */}
      {sortedProviders.map((provider, index) => (
        <OrganizationCard 
          key={provider.fullName || provider.authors[0]}
          provider={provider} 
          calendarData={calendarData}
          rank={index + 1}
          viewMode={viewMode}
        />
      ))}
    </div>
  );
};

export default React.memo(HeatmapGrid);