'use client';

import type { LucideIcon } from 'lucide-react';
import { TrendingUp, TrendingDown } from 'lucide-react';
import { cn } from '@/lib/utils';

interface StatCardProps {
  label: string;
  value: string | number;
  icon: LucideIcon;
  trend?: number;
  iconClass?: string;
  className?: string;
}

export function StatCard({ label, value, icon: Icon, trend, iconClass, className }: StatCardProps) {
  return (
    <div className={cn('card card-hover p-5', className)}>
      <div className="flex items-start justify-between">
        <div className="min-w-0">
          <p className="text-sm font-medium text-ink-muted">{label}</p>
          <p className="mt-2 truncate text-2xl font-bold tracking-tight text-ink">{value}</p>
          {typeof trend === 'number' && (
            <div className="mt-2 flex items-center gap-1 text-xs">
              <span className={cn('inline-flex items-center gap-0.5 font-semibold', trend >= 0 ? 'text-emerald-500' : 'text-red-500')}>
                {trend >= 0 ? <TrendingUp className="h-3.5 w-3.5" /> : <TrendingDown className="h-3.5 w-3.5" />}
                {Math.abs(trend)}%
              </span>
              <span className="text-ink-faint">vs last period</span>
            </div>
          )}
        </div>
        <div className={cn('flex h-11 w-11 shrink-0 items-center justify-center rounded-xl', iconClass ?? 'bg-primary-100 text-primary-600 dark:bg-primary-500/15 dark:text-primary-300')}>
          <Icon className="h-5 w-5" />
        </div>
      </div>
    </div>
  );
}