import * as React from "react"
import { CheckCircle2, Clock3, Footprints, DollarSign } from "lucide-react"
import { SummaryCards } from "@/registry/blocks/summary-cards/summary-cards"

const cards = [
  { id: "simplified", label: "Simplified", value: 128, delta: 12, icon: <CheckCircle2 /> },
  { id: "in-progress", label: "In progress", value: 24, delta: -3, icon: <Clock3 /> },
  { id: "steps-saved", label: "Steps saved", value: "1,540", delta: 0, icon: <Footprints /> },
  { id: "cost-saved", label: "Cost saved", value: "$2.4M", delta: 8, icon: <DollarSign /> },
]

export default function SummaryCardsDemo() {
  return (
    <div className="w-full">
      <SummaryCards cards={cards} />
    </div>
  )
}