import type { VVTTemplate } from '../_types'

export function VVTTab({ templates }: { templates: VVTTemplate[] }) {
  if (templates.length === 0) {
    return (
      <div className="text-center py-12 text-slate-400">
        <p className="text-lg">Keine VVT-Vorlagen verfuegbar</p>
        <p className="text-sm mt-1">Fuer diese Branche wurden noch keine Verarbeitungsvorlagen definiert.</p>
      </div>
    )
  }

  return (
    <div className="space-y-4">
      {templates.map((vvt, idx) => (
        <div
          key={idx}
          className="bg-white border border-slate-200 rounded-lg p-5 hover:border-emerald-200 transition-colors"
        >
          <div className="flex items-start justify-between gap-4">
            <div className="flex-1">
              <h4 className="font-semibold text-slate-900">{vvt.name}</h4>
              <p className="text-sm text-slate-500 mt-1">{vvt.purpose}</p>
            </div>
            <span className="inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium bg-slate-100 text-slate-600 flex-shrink-0">
              {vvt.retention_period}
            </span>
          </div>

          <div className="mt-3 pt-3 border-t border-slate-100">
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
              <div>
                <p className="text-xs font-medium text-slate-400 uppercase tracking-wider mb-1">Rechtsgrundlage</p>
                <p className="text-sm text-slate-700">{vvt.legal_basis}</p>
              </div>

              <div className="sm:hidden">
                <p className="text-xs font-medium text-slate-400 uppercase tracking-wider mb-1">Aufbewahrungsfrist</p>
                <p className="text-sm text-slate-700">{vvt.retention_period}</p>
              </div>

              <div>
                <p className="text-xs font-medium text-slate-400 uppercase tracking-wider mb-1.5">Datenkategorien</p>
                <div className="flex flex-wrap gap-1.5">
                  {vvt.data_categories.map((cat) => (
                    <span
                      key={cat}
                      className="inline-flex items-center px-2 py-0.5 rounded text-xs bg-emerald-50 text-emerald-700 border border-emerald-100"
                    >
                      {cat}
                    </span>
                  ))}
                </div>
              </div>

              <div>
                <p className="text-xs font-medium text-slate-400 uppercase tracking-wider mb-1.5">Betroffene</p>
                <div className="flex flex-wrap gap-1.5">
                  {vvt.data_subjects.map((sub) => (
                    <span
                      key={sub}
                      className="inline-flex items-center px-2 py-0.5 rounded text-xs bg-teal-50 text-teal-700 border border-teal-100"
                    >
                      {sub}
                    </span>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      ))}
    </div>
  )
}