import type { ReactNode } from 'react';

export interface KpiCardProps {
  label: string;
  value: string;
  accent: string;
  bg: string;
  icon: ReactNode;
}

export function KpiCard({ label, value, accent, bg, icon }: KpiCardProps) {
  return (
    <div className="relative rounded-2xl border border-border bg-card p-4 pb-3 shadow-sm overflow-hidden">
      <div aria-hidden className="absolute -top-8 -right-8 w-28 h-28 rounded-full opacity-70 pointer-events-none" style={{ background: bg }} />
      <div className="relative flex items-center justify-between mb-2">
        <span className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">{label}</span>
        <span aria-hidden className="inline-flex items-center justify-center w-8 h-8 rounded-xl flex-shrink-0" style={{ background: bg, color: accent }}>
          {icon}
        </span>
      </div>
      <div className="relative text-3xl font-bold text-foreground leading-tight tabular-nums">{value}</div>
      <div aria-hidden className="absolute left-0 right-0 bottom-0 h-[3px]" style={{ background: accent }} />
    </div>
  );
}

const I = ({ d }: { d: string }) => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
    <path d={d} />
  </svg>
);
export const IconVisits   = <I d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z M12 15a3 3 0 100-6 3 3 0 000 6z" />;
export const IconCommands = <I d="M13 2L3 14h7l-1 8 10-12h-7l1-8z" />;
export const IconProducts = <I d="M3 7l9-4 9 4-9 4-9-4z M3 7v10l9 4 9-4V7" />;
export const IconRevenue  = <I d="M12 2v20 M5 8h11a3 3 0 010 6H8a3 3 0 000 6h11" />;