"use client"

import ContributionHeatmap from "@/components/ui/contribution-heatmap"

function generateData() {

  const today = new Date()
  const data = []

  for (let i = 365; i >= 0; i--) {

    const d = new Date(today)
    d.setDate(today.getDate() - i)

    data.push({
      date: d.toISOString().split("T")[0],
      count: Math.random() < 0.5 ? 0 : Math.floor(Math.random() * 6)
    })

  }

  return data
}

export default function Demo() {

  const data = generateData()

  return (
    <div className="w-full flex flex-col items-center gap-6 p-10">

      <div className="text-center max-w-md">

        <h2 className="text-lg font-semibold">
          Contribution Heatmap
        </h2>

        <p className="text-sm text-muted-foreground mt-1">
          A GitHub-style activity heatmap with theme support,
          export functionality, and animated replay.
        </p>

      </div>

      <ContributionHeatmap data={data} />

    </div>
  )
}