novalon-website/src/components/ui/metric-card.tsx

'use client';

import type { ReactNode } from 'react';
import { ArrowUpRight, ArrowDownRight } from 'lucide-react';
import { AnimatedCounter } from '@/components/ui/animated-counter';
import { cn } from '@/lib/utils';

type TrendDirection = 'up' | 'down' | 'neutral';

interface MetricCardProps {
  icon?: ReactNode;
  label: string;
  value: number;
  prefix?: string;
  suffix?: string;
  decimals?: number;
  description?: string;
  trend?: {
    value: string;
    direction: TrendDirection;
    label?: string;
  };
  accentColor?: 'brand' | 'blue' | 'teal' | 'amber' | 'purple';
  className?: string;
  theme?: 'light' | 'dark';
}

const accentStyles: Record<string, string> = {
  brand: 'text-brand-ink bg-brand-bg',
  blue: 'text-accent-blue bg-accent-blue/10',
  teal: 'text-accent-teal bg-accent-teal/10',
  amber: 'text-accent-amber bg-accent-amber/10',
  purple: 'text-accent-purple bg-accent-purple/10',
};

const trendIcon = {
  up: ArrowUpRight,
  down: ArrowDownRight,
  neutral: ArrowUpRight,
};

const trendColor: Record<TrendDirection, string> = {
  up: 'text-success',
  down: 'text-error',
  neutral: 'text-text-muted',
};

export function MetricCard({
  icon,
  label,
  value,
  prefix = '',
  suffix = '',
  decimals = 0,
  description,
  trend,
  accentColor = 'brand',
  className,
  theme = 'light',
}: MetricCardProps) {
  const TrendIcon = trend ? trendIcon[trend.direction] : null;
  const isDark = theme === 'dark';

  return (
    <div
      className={cn(
        'group relative overflow-hidden rounded-sm border p-6 sm:p-7 transition-all duration-300 ease-out',
        isDark
          ? 'bg-overlay/50 border-white/[0.08] hover:border-white/20 hover:bg-overlay'
          : 'border-border-primary bg-bg-primary hover:bg-bg-secondary',
        className
      )}
    >
      <div className="flex items-start justify-between mb-5">
        {icon && (
          <div
            className={cn(
              'flex w-12 h-12 items-center justify-center rounded-xl transition-transform duration-300 group-hover:scale-110',
              accentStyles[accentColor]
            )}
          >
            {icon}
          </div>
        )}
        {trend && TrendIcon && (
          <div className={cn('flex items-center gap-1 text-xs font-medium', trendColor[trend.direction])}>
            <TrendIcon className="w-3.5 h-3.5" />
            <span>{trend.value}</span>
            {trend.label && <span className={isDark ? 'text-white/40' : 'text-text-subtle'}>{trend.label}</span>}
          </div>
        )}
      </div>

      <div className="space-y-1.5">
        <div className={cn(
          'text-sm font-medium tracking-wide uppercase',
          isDark ? 'text-white/50' : 'text-text-muted'
        )}>
          {label}
        </div>
        <div className={cn(
          'text-3xl sm:text-4xl font-bold tracking-tight',
          isDark ? 'text-white' : 'text-text-primary'
        )}>
          <AnimatedCounter
            value={value}
            decimals={decimals}
            prefix={prefix}
            suffix={suffix}
          />
        </div>
        {description && (
          <p className={cn(
            'text-sm leading-relaxed pt-2',
            isDark ? 'text-white/60' : 'text-text-muted'
          )}>
            {description}
          </p>
        )}
      </div>
    </div>
  );
}