import { SectionHeading } from "@/components/ui/section-heading"
import { ComponentContainer } from "@/components/ui/component-container"
import { StatCard } from "@/components/blocks/stat-card-block"
import { IoBarChart, IoPeople, IoCart, IoCash } from "react-icons/io5"

export function StatCardSection() {
  return (
    <div className="space-y-6">
      <SectionHeading
        title="Stat Card"
        description="A card component for displaying key metrics and statistics with trends."
      />

      <ComponentContainer className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4" title="">
        <StatCard
          title="Total Revenue"
          value="$45,231.89"
          description="Monthly revenue"
          trend={{ value: "20.1%", positive: true }}
          icon={<IoBarChart className="h-4 w-4" />}
        />
        <StatCard
          title="Active Users"
          value="2,345"
          description="Increase from last month"
          trend={{ value: "12.5%", positive: true }}
          icon={<IoPeople className="h-4 w-4" />}
        />
        <StatCard
          title="Conversion Rate"
          value="3.2%"
          description="Decrease from last month"
          trend={{ value: "0.4%", positive: false }}
          icon={<IoCart className="h-4 w-4" />}
        />
        <StatCard
          title="Avg. Order Value"
          value="$59.62"
          description="Increase from last month"
          trend={{ value: "7.3%", positive: true }}
          icon={<IoCash className="h-4 w-4" />}
        />
      </ComponentContainer>
    </div>
  )
}