eventify-server-monitor/client/src/components/dashboard/KpiCard.tsx

import type { LucideIcon } from "lucide-react"
import { TrendingUp, TrendingDown } from "lucide-react"
import { cn } from "@/lib/utils"
import { Card, CardContent } from "@/components/ui/card"

interface KpiCardProps {
  title: string
  value: string
  subtitle?: string
  icon: LucideIcon
  iconColor?: string
  trend?: { value: string; positive: boolean }
}

export function KpiCard({
  title,
  value,
  subtitle,
  icon: Icon,
  iconColor = "text-primary",
  trend,
}: KpiCardProps) {
  return (
    <Card className="gap-4 py-5">
      <CardContent className="flex flex-col gap-3">
        <div className="flex items-center justify-between">
          <span className="text-sm font-medium text-muted-foreground">
            {title}
          </span>
          <div
            className={cn(
              "flex size-9 items-center justify-center rounded-lg bg-muted",
              iconColor
            )}
          >
            <Icon className="size-4" />
          </div>
        </div>

        <div>
          <p className="text-2xl font-bold tracking-tight text-foreground">
            {value}
          </p>
          {(subtitle || trend) && (
            <div className="mt-1 flex items-center gap-1.5">
              {trend && (
                <>
                  {trend.positive ? (
                    <TrendingUp className="size-3.5 text-green-500" />
                  ) : (
                    <TrendingDown className="size-3.5 text-red-500" />
                  )}
                  <span
                    className={cn(
                      "text-xs font-medium",
                      trend.positive ? "text-green-600" : "text-red-600"
                    )}
                  >
                    {trend.value}
                  </span>
                </>
              )}
              {subtitle && (
                <span className="text-xs text-muted-foreground">
                  {subtitle}
                </span>
              )}
            </div>
          )}
        </div>
      </CardContent>
    </Card>
  )
}