'use client'

interface WizardBannerProps {
  module: string
  title: string
  description?: string
}

export function WizardBanner({ module, title, description }: WizardBannerProps) {
  return (
    <div className="bg-gradient-to-r from-blue-50 to-purple-50 border border-blue-200 rounded-lg p-4 mb-6">
      <div className="flex items-center justify-between">
        <div className="flex items-center">
          <span className="text-2xl mr-3">🎓</span>
          <div>
            <h3 className="font-medium text-blue-800">Lern-Wizard: {title}</h3>
            <p className="text-sm text-blue-600">
              {description || 'Interaktives Onboarding mit Tests und Architektur-Erklaerungen'}
            </p>
          </div>
        </div>
        <a
          href={`/admin/${module}/wizard`}
          className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
        >
          Wizard starten →
        </a>
      </div>
    </div>
  )
}