'use client'

import { Regulation } from '../_hooks/useComplianceHub'

export function RegulationsTable({
  regulations,
  onRefresh,
}: {
  regulations: Regulation[]
  onRefresh: () => void
}) {
  return (
    <div className="bg-white rounded-xl shadow-sm border overflow-hidden">
      <div className="p-4 border-b flex items-center justify-between">
        <h3 className="text-lg font-semibold text-slate-900">Verordnungen & Standards ({regulations.length})</h3>
        <button onClick={onRefresh} className="text-sm text-purple-600 hover:text-purple-700">
          Aktualisieren
        </button>
      </div>
      <div className="overflow-x-auto">
        <table className="w-full">
          <thead className="bg-slate-50">
            <tr>
              <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Code</th>
              <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Name</th>
              <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Typ</th>
              <th className="px-4 py-3 text-center text-xs font-medium text-slate-500 uppercase">Anforderungen</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-slate-200">
            {regulations.slice(0, 15).map((reg) => (
              <tr key={reg.id} className="hover:bg-slate-50">
                <td className="px-4 py-3">
                  <span className="font-mono font-medium text-purple-600">{reg.code}</span>
                </td>
                <td className="px-4 py-3">
                  <p className="font-medium text-slate-900">{reg.name}</p>
                </td>
                <td className="px-4 py-3">
                  <span className={`px-2 py-1 text-xs rounded-full ${
                    reg.regulation_type === 'eu_regulation' ? 'bg-blue-100 text-blue-700' :
                    reg.regulation_type === 'eu_directive' ? 'bg-purple-100 text-purple-700' :
                    reg.regulation_type === 'bsi_standard' ? 'bg-green-100 text-green-700' :
                    'bg-slate-100 text-slate-700'
                  }`}>
                    {reg.regulation_type === 'eu_regulation' ? 'EU-VO' :
                     reg.regulation_type === 'eu_directive' ? 'EU-RL' :
                     reg.regulation_type === 'bsi_standard' ? 'BSI' :
                     reg.regulation_type === 'de_law' ? 'DE' : reg.regulation_type}
                  </span>
                </td>
                <td className="px-4 py-3 text-center">
                  <span className="font-medium">{reg.requirement_count}</span>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  )
}