'use client'

import type { Export } from './types'
import { formatFileSize } from './types'

interface ExportHistoryProps {
  exports: Export[]
  downloadExport: (id: string) => void
}

export default function ExportHistory({ exports, downloadExport }: ExportHistoryProps) {
  return (
    <div className="bg-white rounded-xl shadow-sm border p-6">
      <h3 className="text-lg font-semibold text-slate-900 mb-4">Letzte Exports</h3>

      {exports.length === 0 ? (
        <p className="text-slate-500 text-sm">Noch keine Exports vorhanden</p>
      ) : (
        <div className="space-y-3">
          {exports.slice(0, 10).map((exp) => (
            <div key={exp.id} className="p-3 bg-slate-50 rounded-lg">
              <div className="flex items-center justify-between mb-1">
                <span className={`px-2 py-0.5 text-xs rounded-full ${
                  exp.status === 'completed' ? 'bg-green-100 text-green-700' :
                  exp.status === 'failed' ? 'bg-red-100 text-red-700' :
                  'bg-yellow-100 text-yellow-700'
                }`}>
                  {exp.status}
                </span>
                <span className="text-xs text-slate-500">
                  {new Date(exp.requested_at).toLocaleDateString('de-DE')}
                </span>
              </div>
              <p className="text-sm font-medium text-slate-900">{exp.export_name}</p>
              <p className="text-xs text-slate-500">{exp.export_type} - {formatFileSize(exp.file_size_bytes)}</p>

              {exp.status === 'completed' && (
                <button
                  onClick={() => downloadExport(exp.id)}
                  className="mt-2 text-xs text-primary-600 hover:text-primary-700 font-medium"
                >
                  Download
                </button>
              )}
            </div>
          ))}
        </div>
      )}
    </div>
  )
}
