import { memo } from "react";
import { Card } from "@/components/ui/card";
import type { LucideProps } from "lucide-react";
import type { ForwardRefExoticComponent, RefAttributes } from "react";

type LucideIcon = ForwardRefExoticComponent<Omit<LucideProps, "ref"> & RefAttributes<SVGSVGElement>>;

interface KPICardProps {
  title: string;
  value: string | number;
  icon: LucideIcon;
  trend?: string;
  trendColor?: "success" | "danger" | "default";
}

const getTrendColorClass = (trendColor: "success" | "danger" | "default"): string => {
  switch (trendColor) {
    case "success":
      return "text-success";
    case "danger":
      return "text-danger";
    default:
      return "text-muted-foreground";
  }
};

export const KPICard = memo(({ title, value, icon: Icon, trend, trendColor = "default" }: KPICardProps) => {
  return (
    <Card className="p-4 hover:shadow-lg transition-shadow">
      <div className="flex items-center gap-3 mb-2">
        <div className="p-2 bg-primary/10 rounded-lg">
          <Icon className="h-5 w-5 text-primary" />
        </div>
        <h3 className="text-sm font-medium text-muted-foreground">{title}</h3>
      </div>
      <p className="text-2xl font-bold text-foreground mb-1">{value}</p>
      {trend && <p className={`text-xs ${getTrendColorClass(trendColor)}`}>{trend}</p>}
    </Card>
  );
});

KPICard.displayName = 'KPICard';