src/components/Heatmap.tsx

import React from "react";
import ActivityCalendar from "react-activity-calendar";
import { Tooltip, Avatar } from "@mui/material";
import Link from "next/link";

type HeatmapProps = {
  data: Array<{ date: string; count: number; level: number }>;
  color: string;
  providerName: string;
  fullName: string;
  avatarUrl: string;
};

const Heatmap: React.FC<HeatmapProps> = ({ data, color, providerName, fullName, avatarUrl }) => {
  return (
    <div className="flex flex-col items-center w-full mx-auto">
      <div className="flex flex-col sm:flex-row items-center mb-4 w-full justify-center">
        {avatarUrl && (
          <Avatar src={avatarUrl} alt={fullName} className="mb-2 sm:mb-0 sm:mr-4" sx={{ width: 48, height: 48 }} />
        )}
        <div className="text-center sm:text-left">
          <h2 className="text-lg font-semibold">
            <Link
              href={`https://huggingface.co/${providerName}`}
              target="_blank"
              rel="noopener noreferrer"
              className="hover:text-blue-500 hover:underline"
            >
              {fullName}
            </Link>
          </h2>
        </div>
      </div>
      <div className="w-full overflow-x-auto flex justify-center">
        <ActivityCalendar
          data={data}
          theme={{
            dark: ["#161b22", color],
            light: ["#e0e0e0", color],
          }}
          hideTotalCount
          renderBlock={(block, activity) => (
            <Tooltip
              title={`${activity.count} events on ${activity.date}`}
              arrow
            >
              {block}
            </Tooltip>
          )}
        />
      </div>
    </div>
  );
};

export default Heatmap;