import * as React from "react"
import { ChartFrame } from "@/registry/charts/chart-frame"
import { Button } from "@/registry/ui/button"

export default function ChartFrameDemo() {
  const bars = [62, 88, 45, 73, 96, 54, 80]
  const chart = (
    <div className="flex h-32 items-end gap-2">
      {bars.map((h, i) => (
        <div
          key={i}
          className="flex-1 rounded-t-md"
          style={{ height: `${h}%`, background: "var(--chart-1)" }}
        />
      ))}
    </div>
  )

  return (
    <div className="w-full max-w-xl">
      <ChartFrame
        title="Visitors"
        subtitle="Approximate (top-N sampling)"
        action={
          <Button variant="outline" size="sm">
            Export
          </Button>
        }
      >
        {chart}
      </ChartFrame>
    </div>
  )
}