'use client'

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

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

export default function HeroEditor({ content, isRTL, t, updateHero }: HeroEditorProps) {
  const dir = isRTL ? 'rtl' : 'ltr'

  return (
    <div className="space-y-6">
      <h2 className="text-xl font-semibold text-slate-900">{t('admin_tab_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-primary-500 focus:border-primary-500"
            dir={dir}
          />
        </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-primary-500 focus:border-primary-500"
            dir={dir}
          />
        </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-primary-500 focus:border-primary-500"
              dir={dir}
            />
          </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-primary-500 focus:border-primary-500"
              dir={dir}
            />
          </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-primary-500 focus:border-primary-500"
            dir={dir}
          />
        </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-primary-500 focus:border-primary-500"
              dir={dir}
            />
          </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-primary-500 focus:border-primary-500"
              dir={dir}
            />
          </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-primary-500 focus:border-primary-500"
              dir={dir}
            />
          </div>
        </div>
      </div>
    </div>
  )
}