import type { ReactNode } from "react";
import type { LucideIcon } from "lucide-react";
import styles from "./KpiCard.module.css";

interface KpiCardProps {
  label: string;
  value: ReactNode;
  icon: LucideIcon;
  color?: string;
  sub?: string;
  trend?: number;
  trendLabel?: string;
}

export default function KpiCard({ label, value, icon: Icon, color = "var(--vert-fonce)", sub, trend, trendLabel }: KpiCardProps) {
  return (
    <div className={styles.card}>
      <div className={styles.iconWrap} style={{ color }}>
        <Icon size={20} strokeWidth={1.8} />
      </div>
      <div className={styles.body}>
        <p className={styles.label}>{label}</p>
        <div className={styles.value}>{value}</div>
        {sub && <p className={styles.sub}>{sub}</p>}
        {trend !== undefined && (
          <div className={`${styles.trend} ${trend >= 0 ? styles.trendUp : styles.trendDown}`}>
            <span>
              {trend >= 0 ? "↑" : "↓"} {Math.abs(trend)}%
            </span>
            {trendLabel && <span className={styles.trendLabel}>{trendLabel}</span>}
          </div>
        )}
      </div>
    </div>
  );
}