import {
  Zap,
  BarChart3,
  Leaf,
  DollarSign,
  Users,
  ArrowDown,
} from "lucide-react";
import { cn } from "@/lib/utils";
const icons = {
  power: Zap,
  sessions: BarChart3,
  energy: Leaf,
  revenue: DollarSign,
  users: Users,
};
export function MetricCard({
  label,
  value,
  description,
  icon = "energy",
  change,
  className,
  detail = false,
}: {
  label: string;
  value: string;
  description?: string;
  icon?: keyof typeof icons;
  change?: string;
  className?: string;
  detail?: boolean;
}) {
  const Icon = icons[icon];
  return (
    <section
      className={cn(detail ? "detail-panel" : "panel", "p-4 md:p-5", className)}
    >
      <span
        className={cn(
          "mb-3 flex size-10 items-center justify-center rounded-lg",
          icon === "revenue"
            ? "bg-info/5 text-info"
            : icon === "sessions"
              ? "bg-info/5 text-info"
              : "bg-accent text-primary",
        )}
      >
        <Icon className="size-5" />
      </span>
      <h2 className={detail ? "metric-label" : "text-sm text-muted-foreground"}>
        {label}
      </h2>
      <div className="mt-2 flex items-center justify-between gap-2">
        <p className="text-2xl font-semibold">{value}</p>
        {change && (
          <span className="flex items-center rounded-full bg-destructive/10 px-2 py-1 text-xs text-destructive">
            <ArrowDown className="size-3" />
            {change}
          </span>
        )}
      </div>
      {description && (
        <p className="mt-1 text-xs text-muted-foreground">{description}</p>
      )}
    </section>
  );
}