'use client'

import type { WebsiteContent, HeroContent } from '@/lib/content-types'

interface HeroEditorProps {
  content: WebsiteContent
  updateHero: (field: keyof HeroContent, value: string) => void
}

export function HeroEditor({ content, updateHero }: HeroEditorProps) {
  return (
    <div className="space-y-6">
      <h2 className="text-xl font-semibold text-slate-900">Hero Section</h2>

      <div className="grid gap-4">
        <div>
          <label className="block text-sm font-medium text-slate-700 mb-1">Badge</label>
          <input
            type="text"
            value={content.hero.badge}
            onChange={(e) => updateHero('badge', e.target.value)}
            className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-slate-700 mb-1">
            Titel (vor Highlight)
          </label>
          <input
            type="text"
            value={content.hero.title}
            onChange={(e) => updateHero('title', e.target.value)}
            className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
          />
        </div>

        <div className="grid grid-cols-2 gap-4">
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">
              Highlight 1
            </label>
            <input
              type="text"
              value={content.hero.titleHighlight1}
              onChange={(e) => updateHero('titleHighlight1', e.target.value)}
              className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">
              Highlight 2
            </label>
            <input
              type="text"
              value={content.hero.titleHighlight2}
              onChange={(e) => updateHero('titleHighlight2', e.target.value)}
              className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
            />
          </div>
        </div>

        <div>
          <label className="block text-sm font-medium text-slate-700 mb-1">Untertitel</label>
          <textarea
            value={content.hero.subtitle}
            onChange={(e) => updateHero('subtitle', e.target.value)}
            rows={3}
            className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
          />
        </div>

        <div className="grid grid-cols-3 gap-4">
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">
              CTA Primaer
            </label>
            <input
              type="text"
              value={content.hero.ctaPrimary}
              onChange={(e) => updateHero('ctaPrimary', e.target.value)}
              className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">
              CTA Sekundaer
            </label>
            <input
              type="text"
              value={content.hero.ctaSecondary}
              onChange={(e) => updateHero('ctaSecondary', e.target.value)}
              className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1">CTA Hinweis</label>
            <input
              type="text"
              value={content.hero.ctaHint}
              onChange={(e) => updateHero('ctaHint', e.target.value)}
              className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
            />
          </div>
        </div>
      </div>
    </div>
  )
}
