'use client'

import { useParams } from 'next/navigation'
import { SuggestedNorms } from '../_components/SuggestedNorms'

export default function NormsPage() {
  const params = useParams()
  const projectId = params.projectId as string

  return (
    <div className="space-y-6">
      {/* Page header */}
      <div>
        <h1 className="text-xl font-bold text-gray-900 dark:text-white">Normenrecherche</h1>
        <p className="text-sm text-gray-500 mt-1">
          Relevante Normen fuer Ihr Produkt, automatisch ermittelt aus Maschinentyp, Gefaehrdungen
          und Komponenten. Ergaenzen Sie bei Bedarf weitere Normen manuell.
        </p>
      </div>

      {/* Info banner */}
      <div className="p-4 rounded-lg bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800">
        <div className="flex items-start gap-3">
          <svg className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          <div className="text-xs text-blue-800 dark:text-blue-300">
            <strong>A-Normen</strong> (z.B. ISO 12100) gelten fuer alle Maschinen.{' '}
            <strong>B-Normen</strong> decken Sicherheitsaspekte ab (B1: Grundnormen, B2: Schutzeinrichtungen).{' '}
            <strong>C-Normen</strong> sind maschinenspezifisch und erzeugen eine Konformitaetsvermutung.
          </div>
        </div>
      </div>

      {/* Suggested norms component — rendered expanded (not collapsed by default) */}
      <SuggestedNorms projectId={projectId} />
    </div>
  )
}