'use client';

import { FC } from 'react';
import { Card } from '@/components/common';
import { formatNumber, formatPercentage } from '@/utils/formatters';
import styles from './StatCard.module.scss';

export interface StatCardProps {
  title: string;
  value: number | string;
  suffix?: string;
  change?: {
    value: number;
    trend: 'up' | 'down';
  };
  color?: string;
}

export const StatCard: FC<StatCardProps> = ({ title, value, suffix = '', change, color }) => {
  return (
    <Card className={styles.statCard}>
      <div className={styles.statCard__header}>
        <span className={styles.statCard__title}>{title}</span>
        {color && (
          <span className={styles.statCard__indicator} style={{ backgroundColor: color }} />
        )}
      </div>
      <div className={styles.statCard__value}>
        <span className={styles.statCard__number}>
          {typeof value === 'number' ? formatNumber(value) : value}
        </span>
        {suffix && <span className={styles.statCard__suffix}>{suffix}</span>}
      </div>
      {change && (
        <div
          className={`${styles.statCard__change} ${styles[`statCard__change--${change.trend}`]}`}
        >
          <span className={styles.statCard__arrow}>
            {change.trend === 'up' ? '↑' : '↓'}
          </span>
          <span>{formatPercentage(change.value)}</span>
          <span className={styles.statCard__period}>较上月</span>
        </div>
      )}
    </Card>
  );
};
