'use client'

import type { HistoryItem } from '../types'
import { getHistoryStatusColor } from '../useSecurityDashboard'

interface HistoryTabProps {
  history: HistoryItem[]
}

export function HistoryTab({ history }: HistoryTabProps) {
  if (history.length === 0) {
    return (
      <div className="text-center py-8 text-slate-500">
        Keine Scan-Historie vorhanden.
      </div>
    )
  }

  return (
    <div className="space-y-4">
      <div className="relative">
        <div className="absolute left-4 top-0 bottom-0 w-0.5 bg-slate-200" />
        {history.map((item, idx) => (
          <div key={idx} className="relative pl-10 pb-6">
            <div className={`absolute left-2.5 w-3 h-3 rounded-full ${getHistoryStatusColor(item.status)}`} />
            <div className="bg-slate-50 rounded-lg p-4 border border-slate-200">
              <div className="flex justify-between items-start mb-1">
                <span className="font-semibold text-slate-900">{item.title}</span>
                <span className="text-xs text-slate-500">
                  {new Date(item.timestamp).toLocaleString('de-DE')}
                </span>
              </div>
              <p className="text-sm text-slate-600">{item.description}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}
