'use client'

import Link from 'next/link'

interface Props {
  /** Risk classification of the AI system. Tile is only rendered for high_risk / unacceptable. */
  riskLevel: string
}

/**
 * Renders a tile pointing to the BSI QUAIDAL-based data-quality control tab.
 * AI Act Article 10 obligations (training-data quality) apply only to high-risk
 * systems, so the tile is skipped for limited / minimal / not-applicable classes.
 */
export function Art10Tile({ riskLevel }: Props) {
  if (riskLevel !== 'high_risk' && riskLevel !== 'unacceptable') return null

  return (
    <Link
      href="/sdk/quality?category=data_quality"
      className="block mt-3 p-3 rounded-lg border border-purple-200 bg-purple-50 hover:bg-purple-100 transition-colors"
    >
      <div className="flex items-start gap-3">
        <div className="w-9 h-9 rounded-full bg-purple-200 text-purple-700 flex items-center justify-center shrink-0">
          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
              d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V7M3 7l9 6 9-6M3 7l9-4 9 4" />
          </svg>
        </div>
        <div className="flex-1 min-w-0">
          <div className="text-sm font-semibold text-purple-900">
            Art. 10 Datenqualität (Hochrisiko-KI)
          </div>
          <div className="text-xs text-purple-700 mt-0.5">
            BSI QUAIDAL Controls: 10 Kriterien, 15 Bausteine, 30 Maßnahmen, 140 Metriken.
            Klicken zum Öffnen des Trainingsdaten-Qualität-Moduls.
          </div>
        </div>
        <svg className="w-4 h-4 text-purple-500 shrink-0 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
        </svg>
      </div>
    </Link>
  )
}