'use client'

import React from 'react'
import { StepHeader, STEP_EXPLANATIONS } from '@/components/sdk/StepHeader'

export default function ObligationsHeader({
  profiling,
  showGapAnalysis,
  onAutoProfiling,
  onToggleGap,
  onAdd,
}: {
  profiling: boolean
  showGapAnalysis: boolean
  onAutoProfiling: () => void
  onToggleGap: () => void
  onAdd: () => void
}) {
  const stepInfo = STEP_EXPLANATIONS['obligations']
  return (
    <StepHeader
      stepId="obligations"
      title={stepInfo?.title || 'Pflichten-Management'}
      description={stepInfo?.description || 'DSGVO & AI-Act Compliance-Pflichten verwalten'}
      explanation={stepInfo?.explanation || ''}
      tips={stepInfo?.tips || []}
    >
      <div className="flex items-center gap-2">
        <button
          onClick={onAutoProfiling}
          disabled={profiling}
          className="flex items-center gap-2 px-4 py-2 bg-white border border-purple-300 text-purple-700 rounded-lg hover:bg-purple-50 transition-colors text-sm disabled:opacity-50"
        >
          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
          </svg>
          {profiling ? 'Profiling...' : 'Auto-Profiling'}
        </button>
        <button
          onClick={onToggleGap}
          className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-colors text-sm ${
            showGapAnalysis ? 'bg-purple-100 text-purple-700' : 'bg-white border border-gray-300 text-gray-700 hover:bg-gray-50'
          }`}
        >
          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
          </svg>
          Gap-Analyse
        </button>
        <button
          onClick={onAdd}
          className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors text-sm"
        >
          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
          </svg>
          Pflicht hinzufuegen
        </button>
      </div>
    </StepHeader>
  )
}