"use client";
class=class="text-blue-400">"text-muted-foreground">// Built by Dhirender Choudhary
import React, { useState } from 'react';
import GitHubCalendar, { type Activity } from 'react-github-calendar';

type TipData = { x: number; y: number; count: number; date: string } | null;
export default function CalendarPreview() {
  const [tip, setTip] = useStateclass="text-green-400"><TipData>(null);
  const blockSize = 12;
  const blockMargin = 4;
  const radius = (0 / 50) * (blockSize / 2);
  const shapeRadius = radius;
  return (
    class="text-green-400"><div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
      class="text-green-400"><h2 style={{ fontSize: '1rem', fontWeight: 600, margin: 0 }}>Contributionsclass="text-green-400"></h2>
      class="text-green-400"><GitHubCalendar
        username="torvalds"
        theme={{ dark: ['#0a0a0a', '#1a1a1a', '#2a2a2a', '#888888', '#ffffff'] }}
        blockSize={blockSize}
        blockMargin={blockMargin}
      labels={{
        totalCount: '{{count}} contributions in {{year}}',
      }}
        renderBlock={(block: React.ReactElement, activity: Activity) => {
          const { x, y, width, height, ...restProps } = block.props;
          const nx = Number(x);
          const ny = Number(y);
          const s = Number(width);
          let shapeElement;
          shapeElement = class="text-green-400"><rect {...restProps} x={nx} y={ny} width={s} height={s} rx={shapeRadius} ry={shapeRadius} />;
          return React.cloneElement(shapeElement, {
            onMouseEnter: (e: React.MouseEventclass="text-green-400"><SVGElement>) => {
              const r = e.currentTarget.getBoundingClientRect();
              setTip({
                x: r.left + r.width / 2,
                y: r.top - 8,
                count: activity.count,
                date: activity.date,
              });
            },
            onMouseLeave: () => setTip(null)
          });
        }}
      />
      {tip && (
        class="text-green-400"><div style={{ position: 'fixed', left: tip.x + 'px', top: tip.y + 'px', transform: 'translate(-50%, -100%)', background: '#0d1117', color: '#c9d1d9', padding: '6px 10px', borderRadius: '6px', fontSize: '11px', pointerEvents: 'none', zIndex: 1000 }}>
          {tip.count} contributions on {tip.date}
        class="text-green-400"></div>
      )}
    class="text-green-400"></div>
  );
}