'use client'

import type { TestResult } from './types'

interface TestResultCardProps {
  result: TestResult
}

export function TestResultCard({ result }: TestResultCardProps) {
  const statusColors = {
    passed: 'bg-green-100 border-green-300 text-green-800',
    failed: 'bg-red-100 border-red-300 text-red-800',
    pending: 'bg-yellow-100 border-yellow-300 text-yellow-800',
    skipped: 'bg-gray-100 border-gray-300 text-gray-600',
  }

  const statusIcons = {
    passed: '✓',
    failed: '✗',
    pending: '○',
    skipped: '−',
  }

  return (
    <div className={`border rounded-lg p-4 mb-3 ${statusColors[result.status]}`}>
      <div className="flex items-start justify-between">
        <div className="flex-1">
          <h4 className="font-medium flex items-center">
            <span className="mr-2">{statusIcons[result.status]}</span>
            {result.name}
          </h4>
          <p className="text-sm opacity-80 mt-1">{result.description}</p>
        </div>
        <span className="text-xs opacity-60">{result.duration_ms.toFixed(0)}ms</span>
      </div>
      <div className="mt-3 grid grid-cols-2 gap-4 text-sm">
        <div>
          <span className="font-medium">Erwartet:</span>
          <code className="block mt-1 bg-white bg-opacity-50 px-2 py-1 rounded text-xs">
            {result.expected}
          </code>
        </div>
        <div>
          <span className="font-medium">Erhalten:</span>
          <code className="block mt-1 bg-white bg-opacity-50 px-2 py-1 rounded text-xs">
            {result.actual}
          </code>
        </div>
      </div>
      {result.error_message && (
        <div className="mt-2 text-xs text-red-700 bg-red-50 p-2 rounded">
          Fehler: {result.error_message}
        </div>
      )}
    </div>
  )
}