import type React from "react"
import { IoBarChart, IoPeople, IoCart, IoTrendingUp, IoTrendingDown, IoCash } from "react-icons/io5"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { cn } from "@/lib/utils"

interface StatCardProps {
  title: string
  value: string
  description?: string
  icon?: React.ReactNode
  trend?: {
    value: string
    positive: boolean
  }
  className?: string
}

function StatCard({ title, value, description, icon, trend, className }: StatCardProps) {
  return (
    <Card className={cn("overflow-hidden", className)}>
      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
        <CardTitle className="text-sm font-medium text-muted-foreground">{title}</CardTitle>
        {icon && <div className="text-muted-foreground">{icon}</div>}
      </CardHeader>
      <CardContent className="p-6 pt-0">
        <div className="text-2xl font-bold tracking-tight">{value}</div>
        {description && <p className="text-xs text-muted-foreground mt-1">{description}</p>}
      </CardContent>
      {trend && (
        <CardFooter className="p-6 pt-0">
          <div className={cn("flex items-center text-xs", trend.positive ? "text-emerald-600" : "text-rose-600")}>
            {trend.positive ? <IoTrendingUp className="mr-1 h-3 w-3" /> : <IoTrendingDown className="mr-1 h-3 w-3" />}
            <span>{trend.value} from last month</span>
          </div>
        </CardFooter>
      )}
    </Card>
  )
}

export function DashboardStatsBlock() {
  return (
    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
      <StatCard
        title="Total Revenue"
        value="$45,231.89"
        description="Monthly revenue"
        icon={<IoCash className="h-4 w-4" />}
        trend={{ value: "+20.1%", positive: true }}
      />
      <StatCard
        title="Subscriptions"
        value="2,350"
        description="Active users"
        icon={<IoPeople className="h-4 w-4" />}
        trend={{ value: "+10.1%", positive: true }}
      />
      <StatCard
        title="Sales"
        value="12,234"
        description="Total orders"
        icon={<IoCart className="h-4 w-4" />}
        trend={{ value: "-5.2%", positive: false }}
      />
      <StatCard
        title="Active Now"
        value="573"
        description="Users online"
        icon={<IoBarChart className="h-4 w-4" />}
        trend={{ value: "+12.4%", positive: true }}
      />
    </div>
  )
}