import { Heatmap as Hm }               from "@/components/ui/heatmap";

export function Heatmap({
  data,
  startDate,
  endDate,
}: {
  data: { date: string, value: number }[];
  startDate?: Date;
  endDate?: Date;
}) {
  const defaultIntensityColours = [
    "#f0fdf4",
    "#bbf7d0",
    "#86efac",
    "#22c55e",
    "#166534" 
  ];

  return (
    <div className="w-full">
      <p className="text-md mb-1 text-gray-900">{data.length} trades in { endDate ? endDate.getFullYear() : 'the last year' }</p>
      <div className="border border-border rounded-xl m-0 p-3 w-full">
        <div className="overflow-x-auto w-full">
          <div className="flex w-max space-x-4 p-0 py-2">
            <Hm
              data={data}
              startDate={startDate ?? (() => {
                const d = new Date();
                d.setFullYear(new Date().getFullYear() - 1);
                return d;
              })()}
              endDate={endDate ?? new Date()}
              cellSize={11}
              gap={3}
              colorMode="discrete"
              label={{ single: 'trade', plural: 'trades' }}
            />
          </div>
        </div>
        <div className="flex items-center justify-end gap-2 mt-2">
          <span className="text-xs text-gray-500">Less</span>
          <div className="flex gap-1">
            {defaultIntensityColours.map((color) => (
              <div key={color} className="w-2.75 h-2.75 rounded-xs border border-black/5 dark:border-white/5" style={{ backgroundColor: color }} />
            ))}
          </div>
          <span className="text-xs text-gray-500">More</span>
        </div>
      </div>
    </div>
  );
}