'use client'

import { Card } from '@/components/ui/card'
import { cn } from '@/lib/utils'

export interface MetricItem {
  title: string
  value: string | number
  trend?: {
    value: number
    isPositive: boolean
  }
  icon?: React.ReactNode
}

export interface AdminMetricsProps {
  metrics: MetricItem[]
  className?: string
}

export function AdminMetrics({ metrics, className }: AdminMetricsProps) {
  return (
    <div
      className={cn(
        'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4',
        className
      )}
    >
      {metrics.map((metric, index) => (
        <Card
          key={index}
          className="p-6 bg-white dark:bg-zinc-900 border-gray-200 dark:border-gray-800"
        >
          <div className="flex items-start justify-between">
            <div className="flex-1">
              <p className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">
                {metric.title}
              </p>
              <p className="text-2xl font-bold text-gray-900 dark:text-white">
                {metric.value}
              </p>
              {metric.trend && (
                <div className="flex items-center gap-1 mt-2">
                  <span
                    className={cn(
                      'text-xs font-medium',
                      metric.trend.isPositive
                        ? 'text-green-600 dark:text-green-400'
                        : 'text-red-600 dark:text-red-400'
                    )}
                  >
                    {metric.trend.isPositive ? '↑' : '↓'} {Math.abs(metric.trend.value)}%
                  </span>
                  <span className="text-xs text-gray-500 dark:text-gray-400">
                    vs last period
                  </span>
                </div>
              )}
            </div>
            {metric.icon && (
              <div className="p-2 bg-gray-100 dark:bg-zinc-800 rounded-lg">
                {metric.icon}
              </div>
            )}
          </div>
        </Card>
      ))}
    </div>
  )
}