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 totalCount = calendarData[calendarKey]?.reduce((sum, day) => sum + day.count, 0) || 0;

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

  return (
    <div 
      className="flex flex-col items-center min-w-0 flex-shrink-0 cursor-pointer"
      onClick={handleClick}
    >
      {/* Logo Circle with Release Count Badge */}
      <div className="relative">
        {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>
        )}
        
        {/* Release Count Badge */}
        <div className="absolute -top-2 -right-2 bg-gradient-to-br from-gray-600 to-gray-700 text-white 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">
          {totalCount > 999 ? `${Math.floor(totalCount / 1000)}k` : totalCount}
        </div>
      </div>
    </div>
  );
};

export default ProviderSummary;