src/components/ProviderSummary.tsx

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

interface ProviderSummaryProps {
  provider: ProviderInfo;
  calendarData: CalendarData;
  rank: number;
}

const ProviderSummary: React.FC<ProviderSummaryProps> = ({ 
  provider, 
  calendarData, 
  rank 
}) => {
  const providerName = provider.fullName || provider.authors[0];
  const calendarKey = provider.authors[0];
  const providerData = calendarData[calendarKey] || [];
  const totalCount = providerData.reduce((sum, day) => sum + day.count, 0);

  const handleClick = () => {
    const element = document.getElementById(`provider-${calendarKey}`);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' });
    }
  };

  const getRankBadgeClasses = () => {
    if (rank === 1) {
      return "bg-gradient-to-br from-yellow-400 to-yellow-600 text-yellow-900";
    }
    if (rank === 2) {
      return "bg-gradient-to-br from-gray-300 to-gray-500 text-gray-900";
    }
    if (rank === 3) {
      return "bg-gradient-to-br from-amber-600 to-amber-800 text-amber-100";
    }
    return "bg-gradient-to-br from-gray-800 to-gray-900 text-gray-100";
  };

  return (
    <div 
      className="flex flex-col items-center min-w-0 flex-shrink-0 cursor-pointer group px-1"
      onClick={handleClick}
    >
      {/* Logo Circle */}
      <div className="relative">
        {/* Rank Badge */}
        <div className={`absolute -top-2 -left-2 ${getRankBadgeClasses()} text-xs font-bold rounded-full min-w-[24px] h-6 flex items-center justify-center px-1.5 shadow-lg border-2 border-background z-10`}>
          #{rank}
        </div>

        {provider.avatarUrl ? (
          <img 
            src={provider.avatarUrl} 
            alt={`${providerName} logo`}
            className="w-16 h-16 rounded-full shadow-lg border-2 border-border/50 hover:border-blue-500/50 transition-all duration-200"
          />
        ) : (
          <div className="w-16 h-16 rounded-full bg-muted flex items-center justify-center text-xl font-bold text-muted-foreground hover:bg-muted/80 transition-all duration-200">
            {providerName.charAt(0).toUpperCase()}
          </div>
        )}
      </div>

      {/* Activity Info */}
      <div className="mt-1.5 text-center space-y-0.5">
                {/* Provider Name */}
        <div className="text-xs font-medium text-foreground truncate max-w-20 text-center">
          {providerName}
        </div>
        
        {/* Release Count */}
        <div className="text-[10px] text-muted-foreground">
          {totalCount} in the last year
        </div>
        
 
      </div>
    </div>
  );
};

export default ProviderSummary;