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

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

const OrganizationCard = React.memo(({ provider, calendarData, rank }: OrganizationCardProps) => {
  const providerName = provider.fullName || provider.authors[0];
  const calendarKey = provider.authors[0];
  const totalCount = calendarData[calendarKey]?.reduce((sum, day) => sum + day.count, 0) || 0;
  
  return (
    <div id={`provider-${calendarKey}`} className="relative bg-gradient-to-br from-card to-card/95 rounded-2xl border border-border shadow-lg hover:shadow-xl transition-all duration-300 p-6 group">
      <OrganizationHeader
        provider={provider}
        calendarKey={calendarKey}
        providerName={providerName}
        totalCount={totalCount}
      />
      
      <div className="flex flex-col items-center bg-muted/30 rounded-xl p-3 group-hover:bg-muted/40 transition-colors duration-300">
        <Heatmap
          data={calendarData[calendarKey]}
          color={provider.color}
          providerName={providerName}
          fullName={provider.fullName ?? providerName}
          avatarUrl={provider.avatarUrl ?? ''}
          authorId={calendarKey}
          showHeader={false}
        />
      </div>

      <div className="mt-3 text-xs text-muted-foreground italic text-center">
        <span className="font-bold text-foreground">{totalCount}</span> new repos in the last year
      </div>
    </div>
  );
});

export default OrganizationCard;