Activity Heatmap

import { ActivityHeatmap } from '@otfdashkit/ui'

const HEATMAP_DATA = (() => {
  const out: { date: string; value: number }[] = []
  let seed = 42
  const rng = () => { seed = (seed * 9301 + 49297) % 233280; return seed / 233280 }
  const today = new Date('2026-04-29')
  const start = new Date(today); start.setDate(start.getDate() - 365)
  const cursor = new Date(start)
  while (cursor <= today) {
    const dow = cursor.getDay()
    const isWeekend = dow === 0 || dow === 6
    out.push({
      date: `${cursor.getFullYear()}-${String(cursor.getMonth() + 1).padStart(2, '0')}-${String(cursor.getDate()).padStart(2, '0')}`,
      value: Math.max(0, Math.round(rng() * (isWeekend ? 6 : 22))),
    })
    cursor.setDate(cursor.getDate() + 1)
  }
  return out
})()

export function Example() {
  return (
    <div className="p-4 max-w-5xl">
      <ActivityHeatmap
        caption="Activity"
        total={1_847_392}
        data={HEATMAP_DATA}
        endDate={new Date('2026-04-29')}
        stats={[
          { label: 'Most Active Month', value: 'March' },
          { label: 'Most Active Day',   value: 'Mar 18, 2026' },
          { label: 'Longest Streak',    value: '64d' },
          { label: 'Current Streak',    value: '21d' },
        ]}
      />
    </div>
  )
}