export function FailedTestsList({ testIds, onViewDetails }: { testIds: string[]; onViewDetails?: (id: string) => void }) {
  if (testIds.length === 0) {
    return (
      <div className="text-center py-8 text-emerald-600">
        <svg className="w-12 h-12 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        Alle Tests bestanden!
      </div>
    )
  }

  return (
    <div className="space-y-2 max-h-64 overflow-y-auto">
      {testIds.map((testId) => (
        <div
          key={testId}
          className="flex items-center justify-between p-3 bg-red-50 rounded-lg border border-red-100"
        >
          <div className="flex items-center gap-2">
            <svg className="w-4 h-4 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
            <span className="font-mono text-sm text-red-700">{testId}</span>
          </div>
          {onViewDetails && (
            <button
              onClick={() => onViewDetails(testId)}
              className="text-xs text-red-600 hover:text-red-800"
            >
              Details
            </button>
          )}
        </div>
      ))}
    </div>
  )
}
