import type { HeroArticlePayload } from '@homaroma/types';
import { useTranslation } from 'react-i18next';
import { getLocalizedField } from '../utils/localization';

interface DynamicHeroArticleProps {
  payload: HeroArticlePayload & {
    imageUrl?: string;
    date?: string;
    category?: string | { [key: string]: string };
  };
}

export default function DynamicHeroArticle({ payload }: DynamicHeroArticleProps) {
  const { t, i18n } = useTranslation();
  const lang = i18n.language;
  const p = payload || {};
  const { imageUrl, date } = p;
  const title = getLocalizedField(p.title, lang);
  const subtitle = getLocalizedField(p.subtitle, lang);
  const author = getLocalizedField(p.author, lang);
  const category = getLocalizedField(p.category, lang);

  return (
    <section className="ui-hero-shell min-h-[60vh] md:min-h-[80vh]">
      {imageUrl && (
        <div className="absolute inset-0 z-0">
          <img src={imageUrl} alt={title || 'Article Hero'} className="w-full h-full object-cover" />
          <div className="ui-hero-overlay" />
        </div>
      )}
      <div className="ui-hero-content text-white">
        {category && (
          <span className="mb-4 block text-sm font-bold uppercase tracking-widest text-spa-gold">
            {category}
          </span>
        )}
        <h1 className="ui-hero-title mb-6">
          {title || t('newsletter.articleDefaultTitle', 'Scent Guide Article')}
        </h1>
        {subtitle && (
          <p className="mx-auto mb-8 max-w-2xl text-lg font-light opacity-90 md:text-xl">
            {subtitle}
          </p>
        )}
        {(author || date) && (
          <div className="flex items-center justify-center gap-4 text-sm font-medium uppercase tracking-wide opacity-80">
            {author && <span>{t('newsletter.byAuthor', { author })}</span>}
            {author && date && <span>•</span>}
            {date && <span>{date}</span>}
          </div>
        )}
      </div>
    </section>
  );
}