'use client'

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { getHealthScoreColor } from '@/lib/design-system'

interface MetricsCardProps {
  title: string
  value: string | number
  health?: number
  trend?: 'up' | 'down' | 'stable'
  description?: string
}

export default function MetricsCard({ 
  title, 
  value, 
  health, 
  trend, 
  description 
}: MetricsCardProps) {
  const healthColor = health !== undefined ? getHealthScoreColor(health) : undefined

  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-sm font-medium text-gray-400">{title}</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="flex items-baseline gap-2">
          <span className="text-3xl font-bold text-white">{value}</span>
          {health !== undefined && (
            <span 
              className="text-sm font-semibold"
              data-health-color
              style={{ '--health-color': healthColor } as React.CSSProperties}
            >
              {health}%
            </span>
          )}
        </div>
        {description && (
          <p className="mt-2 text-sm text-gray-400">{description}</p>
        )}
        {trend && (
          <div className="mt-2 text-xs text-gray-500">
            Trend: {trend}
          </div>
        )}
      </CardContent>
    </Card>
  )
}