'use client'

import { ShieldCheck } from 'lucide-react'

export const EXAMPLE_QUESTIONS: Record<string, string[]> = {
  vvt: [
    'Was ist ein Verarbeitungsverzeichnis?',
    'Welche Informationen muss ich erfassen?',
    'Wie dokumentiere ich die Rechtsgrundlage?',
  ],
  'compliance-scope': [
    'Was bedeutet L3?',
    'Wann brauche ich eine DSFA?',
    'Was ist der Unterschied zwischen L2 und L3?',
  ],
  tom: [
    'Was sind TOM?',
    'Welche Massnahmen sind erforderlich?',
    'Wie dokumentiere ich Verschluesselung?',
  ],
  dsfa: ['Was ist eine DSFA?', 'Wann ist eine DSFA verpflichtend?', 'Wie bewerte ich Risiken?'],
  loeschfristen: [
    'Wie definiere ich Loeschfristen?',
    'Unterschied Loeschpflicht und Aufbewahrungspflicht?',
    'Wann muss ich Daten loeschen?',
  ],
  default: [
    'Wie starte ich mit dem SDK?',
    'Was ist der erste Schritt?',
    'Welche Compliance-Anforderungen gelten fuer KI-Systeme?',
  ],
}

export function AdvisorEmptyState({
  exampleQuestions,
  onExampleClick,
}: {
  exampleQuestions: string[]
  onExampleClick: (question: string) => void
}) {
  return (
    <div className="px-4 py-8 text-center">
      <div className="mx-auto mb-3 flex h-14 w-14 items-center justify-center rounded-full bg-indigo-100">
        <ShieldCheck className="h-7 w-7 text-indigo-600" />
      </div>
      <h3 className="text-sm font-semibold text-gray-900">Compliance Advisor</h3>
      <p className="mx-auto mt-1 max-w-xs text-xs text-gray-500">
        Antworten mit nachvollziehbaren Quellen, Fundstellen und — wo vorhanden — Original-Abbildungen.
      </p>
      <div className="mt-4 space-y-2 text-left">
        <p className="text-xs font-medium text-gray-700">Beispielfragen</p>
        {exampleQuestions.map((q, i) => (
          <button
            key={i}
            onClick={() => onExampleClick(q)}
            className="w-full rounded-lg border border-gray-200 bg-white px-3 py-2 text-left text-xs text-gray-700 transition-colors hover:bg-indigo-50"
          >
            {q}
          </button>
        ))}
      </div>
    </div>
  )
}