'use client';

import React from 'react';
import { LucideIcon } from 'lucide-react';
import { StatCard } from '@/ui/StatCard';

interface MetricCardProps {
  title: string;
  value: number | string;
  change?: number;
  icon: LucideIcon;
  suffix?: string;
  prefix?: string;
  delay?: number;
}

export function MetricCard({
  title,
  value,
  change,
  icon,
  suffix = '',
  prefix = '',
  delay = 0,
}: MetricCardProps) {
  return (
    <StatCard
      label={title}
      value={value}
      icon={icon}
      trend={change !== undefined ? {
        value: Math.abs(change),
        isPositive: change > 0
      } : undefined}
      suffix={suffix}
      prefix={prefix}
      delay={delay}
    />
  );
}