import type { ReactNode } from 'react'

interface MetricCardProps {
  title: string
  value: string | number
  subtitle?: string
  icon?: ReactNode
  trend?: 'up' | 'down' | 'neutral'
  trendValue?: string
}

export default function MetricCard({
  title,
  value,
  subtitle,
  icon,
  trend,
  trendValue,
}: MetricCardProps) {
  return (
    <div className="sb-card">
      <div className="flex items-start justify-between">
        <div>
          <div className="sb-card-header">{title}</div>
          <div className="sb-card-value">{value}</div>
        </div>
        {icon && (
          <div className="rounded-lg bg-surface-hover p-2 text-muted">
            {icon}
          </div>
        )}
      </div>
      {(subtitle || trendValue) && (
        <div className="sb-card-footer flex items-center gap-2">
          {trendValue && (
            <span className={
              trend === 'up' ? 'text-success' :
              trend === 'down' ? 'text-danger' : 'text-muted'
            }>
              {trend === 'up' ? '\u2191' : trend === 'down' ? '\u2193' : ''} {trendValue}
            </span>
          )}
          {subtitle && <span>{subtitle}</span>}
        </div>
      )}
    </div>
  )
}