import React from 'react';
import { TrendingUp, TrendingDown, LucideIcon } from 'lucide-react';
import { __ } from '@/lib/i18n';
import { formatMoney, getStoreCurrency } from '@/lib/currency';

interface StatCardProps {
  title: string;
  value: number | string;
  change?: number;
  icon: LucideIcon;
  format?: 'money' | 'number' | 'percent';
  period?: string;
  loading?: boolean;
}

export function StatCard({ 
  title, 
  value, 
  change, 
  icon: Icon, 
  format = 'number',
  period = '30',
  loading = false 
}: StatCardProps) {
  const store = getStoreCurrency();

  const formatValue = (val: number | string) => {
    if (typeof val === 'string') return val;
    
    switch (format) {
      case 'money':
        return formatMoney(val, {
          currency: store.currency,
          symbol: store.symbol,
          thousandSep: store.thousand_sep,
          decimalSep: store.decimal_sep,
          decimals: store.decimals,
          preferSymbol: true,
        });
      case 'percent':
        return `${val.toFixed(1)}%`;
      default:
        return val.toLocaleString();
    }
  };

  if (loading) {
    return (
      <div className="rounded-lg border bg-card p-6 animate-pulse">
        <div className="flex items-center justify-between mb-4">
          <div className="h-4 bg-muted rounded w-24"></div>
          <div className="h-4 w-4 bg-muted rounded"></div>
        </div>
        <div className="space-y-2">
          <div className="h-8 bg-muted rounded w-32"></div>
          <div className="h-3 bg-muted rounded w-40"></div>
        </div>
      </div>
    );
  }

  return (
    <div className="rounded-lg border bg-card p-6">
      <div className="flex items-center justify-between mb-4">
        <div className="text-sm font-medium text-muted-foreground">{title}</div>
        <Icon className="w-4 h-4 text-muted-foreground" />
      </div>
      <div className="space-y-1">
        <div className="text-2xl font-bold">{formatValue(value)}</div>
        {change !== undefined && (
          <div className="flex items-center gap-1 text-xs">
            {change >= 0 ? (
              <>
                <TrendingUp className="w-3 h-3 text-green-600" />
                <span className="text-green-600 font-medium">{change.toFixed(1)}%</span>
              </>
            ) : (
              <>
                <TrendingDown className="w-3 h-3 text-red-600" />
                <span className="text-red-600 font-medium">{Math.abs(change).toFixed(1)}%</span>
              </>
            )}
            <span className="text-muted-foreground">
              {__('vs previous')} {period} {__('days')}
            </span>
          </div>
        )}
      </div>
    </div>
  );
}
