frontend/src/components/features/MetricsPanel.tsx

import { motion } from 'framer-motion'
import { TrustMetrics } from '@/services/api'

interface MetricsPanelProps {
  metrics: TrustMetrics
}

const metricConfig = [
  { key: 'trust_stability', label: 'Trust Stability', tone: '#e54b2b' },
  { key: 'packet_integrity', label: 'Packet Integrity', tone: '#ff9f1c' },
  { key: 'machine_confidence', label: 'Machine Confidence', tone: '#ffd84d' },
  { key: 'human_readability', label: 'Human Readability', tone: '#78c26d' },
] as const

export function MetricsPanel({ metrics }: MetricsPanelProps) {
  const entries: Array<{ config: typeof metricConfig[number]; value: string }> = metricConfig.map(config => ({
    config,
    value: metrics[config.key],
  }))

  return (
    <motion.div
      initial={{ opacity: 0, y: 16 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.45, delay: 0.12, ease: [0.16, 1, 0.3, 1] }}
      className="brutal-panel p-5"
    >
      <div className="mb-4 flex items-center justify-between gap-3">
        <p className="kicker">Machine diagnostics</p>
        <span className="ink-stamp">Critical</span>
      </div>

      <div className="grid gap-3 sm:grid-cols-2">
        {entries.map(({ config, value }, i) => (
          <motion.div
            key={config.key}
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: i * 0.05, duration: 0.3 }}
            className="border-[3px] border-black p-3"
            style={{ background: config.tone }}
          >
            <p className="mono-label mb-2 text-black">{config.label}</p>
            <p className="font-mono text-sm font-semibold uppercase text-black">{value}</p>
          </motion.div>
        ))}
      </div>
    </motion.div>
  )
}