'use client'

import { ReportType, ExportFormat } from '@/lib/sdk/vendor-compliance'
import { REPORT_TYPE_META } from './ReportTypeGrid'

export interface GeneratedReport {
  id: string
  type: ReportType
  format: ExportFormat
  generatedAt: Date
  filename: string
}

export function RecentReports({ reports }: { reports: GeneratedReport[] }) {
  return (
    <div className="bg-white dark:bg-gray-800 rounded-lg shadow">
      <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
        <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Letzte Reports</h2>
      </div>
      <div className="p-4">
        {reports.length === 0 ? (
          <p className="text-sm text-gray-500 dark:text-gray-400 text-center py-4">Noch keine Reports generiert</p>
        ) : (
          <div className="space-y-3">
            {reports.slice(0, 5).map((report) => (
              <div key={report.id} className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                <div className="flex items-center gap-3">
                  <span className="text-lg">{REPORT_TYPE_META[report.type].icon}</span>
                  <div>
                    <p className="text-sm font-medium text-gray-900 dark:text-white">{report.filename}</p>
                    <p className="text-xs text-gray-500 dark:text-gray-400">{report.generatedAt.toLocaleString('de-DE')}</p>
                  </div>
                </div>
                <button className="text-blue-600 hover:text-blue-800 dark:text-blue-400">
                  <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                  </svg>
                </button>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  )
}
