src/components/ProviderHeatmapSkeleton.tsx

import React from "react";

const ProviderHeatmapSkeleton: React.FC = () => {
  return (
    <div className="relative bg-gradient-to-br from-card to-card/95 rounded-2xl border border-border shadow-lg p-6 animate-pulse">
      <div className="mb-4">
        <div className="text-center bg-muted/20 rounded-lg p-3 border border-border/30">
          {/* Avatar & name */}
          <div className="flex items-center justify-center gap-2 mb-2">
            <div className="h-8 w-8 rounded-md bg-muted shadow-sm" />
            <div className="h-4 w-24 bg-muted rounded" />
          </div>

          {/* Compact stats placeholders */}
          <div className="flex flex-wrap justify-center gap-2 text-xs mb-3">
            {Array.from({ length: 4 }).map((_, i) => (
              <div key={i} className="h-4 w-16 bg-muted rounded" />
            ))}
          </div>

          {/* Divider */}
          <div className="border-t border-border/20 mb-3"></div>

          {/* Releases past year placeholder */}
          <div className="h-3 w-32 mx-auto bg-muted rounded" />
        </div>
      </div>

      {/* Heatmap grid skeleton */}
      <div className="flex flex-col items-center bg-muted/30 rounded-xl p-3">
        <div
          className="grid gap-1 w-full"
          style={{ gridTemplateColumns: "repeat(52, minmax(0, 1fr))" }}
        >
          {Array.from({ length: 52 * 7 }).map((_, i) => (
            <div key={i} className="h-3 bg-muted rounded" />
          ))}
        </div>
      </div>
    </div>
  );
};

export default ProviderHeatmapSkeleton;