import type { ReactNode } from 'react';
import { cn } from '../lib/cn';

export interface KPIDelta {
  value: ReactNode;
  direction: 'up' | 'down';
  positive?: boolean;
}

export interface KPICardProps {
  label: ReactNode;
  value: ReactNode;
  delta?: KPIDelta;
  sparkline?: ReactNode;
  hint?: ReactNode;
  icon?: ReactNode;
  className?: string;
}

export function KPICard({
  label,
  value,
  delta,
  sparkline,
  hint,
  icon,
  className,
}: KPICardProps) {
  const deltaPositive = delta ? (delta.positive ?? delta.direction === 'up') : false;

  return (
    <div
      className={cn(
        'flex flex-col p-5 md:p-6 rounded-2xl border border-border bg-surface',
        className
      )}
    >
      <div className="flex items-start justify-between gap-3">
        <span className="text-sm text-text-2">{label}</span>
        {icon && <span className="text-text-3">{icon}</span>}
      </div>

      <div className="mt-3 flex items-baseline gap-3">
        <span className="text-3xl md:text-4xl font-display font-semibold tracking-tight text-text tab-num">
          {value}
        </span>
        {delta && (
          <span
            className={cn(
              'inline-flex items-center gap-1 text-xs font-medium px-2 py-0.5 rounded-full',
              deltaPositive
                ? 'bg-success-soft text-success'
                : 'bg-danger-soft text-danger'
            )}
          >
            <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" className={delta.direction === 'down' ? 'rotate-180' : ''}>
              <polyline points="6 15 12 9 18 15" />
            </svg>
            {delta.value}
          </span>
        )}
      </div>

      {sparkline && <div className="mt-4 w-full text-text-3">{sparkline}</div>}

      {hint && <div className="mt-3 text-xs text-text-3">{hint}</div>}
    </div>
  );
}