import type React from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { IoTrendingUp, IoTrendingDown, IoBarChart } from "react-icons/io5"

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

export function StatCard({
  title = "Total Revenue",
  value = "$45,231.89",
  description = "Monthly revenue",
  trend = { value: "20.1%", positive: true },
  icon = <IoBarChart className="h-4 w-4" />,
  className,
}: StatCardProps) {
  return (
    <Card className={className}>
      <CardHeader className="flex flex-row items-center justify-between pb-2">
        <CardTitle className="text-sm font-medium">{title}</CardTitle>
        <div className="rounded-md bg-primary/10 p-1 text-primary">{icon}</div>
      </CardHeader>
      <CardContent>
        <div className="text-2xl font-bold">{value}</div>
        <div className="flex items-center pt-1">
          {trend && (
            <span className={`mr-1 flex items-center text-xs ${trend.positive ? "text-green-500" : "text-red-500"}`}>
              {trend.positive ? <IoTrendingUp className="h-3 w-3 mr-1" /> : <IoTrendingDown className="h-3 w-3 mr-1" />}
              {trend.value}
            </span>
          )}
          <CardDescription className="text-xs">{description}</CardDescription>
        </div>
      </CardContent>
    </Card>
  )
}