import { useTranslation } from 'react-i18next';
import { getLocalizedField } from '../utils/localization';

interface DynamicQuoteCalloutProps {
  payload: any;
}

export default function DynamicQuoteCallout({ payload }: DynamicQuoteCalloutProps) {
  const { i18n } = useTranslation();
  const lang = i18n.language;
  const p = payload || {};
  const quote = getLocalizedField(p.quote, lang);
  const author = getLocalizedField(p.author, lang);
  const role = getLocalizedField(p.role, lang);

  return (
    <section className="py-24 px-6 bg-white">
      <div className="max-w-4xl mx-auto text-center">
        <svg className="w-12 h-12 mx-auto text-spa-gold/40 mb-8" fill="currentColor" viewBox="0 0 24 24">
          <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z" />
        </svg>
        <blockquote className="text-2xl md:text-4xl font-serif text-spa-forest italic leading-relaxed mb-8">
          "{quote || 'Fragrance is the invisible, unforgettable, ultimate accessory of fashion.'}"
        </blockquote>
        {(author || role) && (
          <div className="flex flex-col items-center">
            {author && <span className="font-bold uppercase tracking-widest text-spa-stone">{author}</span>}
            {role && <span className="text-sm text-spa-stone/60 mt-1 uppercase tracking-wide">{role}</span>}
          </div>
        )}
      </div>
    </section>
  );
}