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

interface DynamicScentNotesBreakdownProps {
  payload: ScentNotesBreakdownPayload;
}

export default function DynamicScentNotesBreakdown({ payload }: DynamicScentNotesBreakdownProps) {
  const { i18n } = useTranslation();
  const lang = i18n.language;
  const title = getLocalizedField(payload.title, lang);
  const description = getLocalizedField(payload.description, lang);
  const notes = (value: ScentNotesBreakdownPayload['topNotes'] | ScentNotesBreakdownPayload['middleNotes'] | ScentNotesBreakdownPayload['baseNotes']) => Array.isArray(value)
    ? value.map((item) => getLocalizedField(item, lang)).filter(Boolean).join(', ')
    : getLocalizedField(value, lang);
  const labels = {
    th: { top: 'Top Notes', heart: 'Heart Notes', base: 'Base Notes' },
    en: { top: 'Top Notes', heart: 'Heart Notes', base: 'Base Notes' },
    ja: { top: 'トップノート', heart: 'ハートノート', base: 'ベースノート' },
    zh: { top: '前调', heart: '中调', base: '后调' },
    vi: { top: 'Hương đầu', heart: 'Hương giữa', base: 'Hương cuối' },
    ko: { top: '탑 노트', heart: '미들 노트', base: '베이스 노트' }
  } as const;
  const labelSet = labels[lang as keyof typeof labels] ?? labels.en;
  const topNotes = notes(payload.topNotes);
  const heartNotes = notes(payload.middleNotes);
  const baseNotes = notes(payload.baseNotes);

  return (
    <section className="ui-section-band bg-pop-bg">
      <div className="ui-section-inner text-center">
        <h2 className="mb-6 font-serif text-3xl text-pop-black md:text-5xl">
          {title || 'Scent Notes'}
        </h2>
        {description && (
          <p className="ui-section-subtitle mb-16 text-lg text-pop-black/80">
            {description}
          </p>
        )}
        
        <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
          <div className="ui-shell-card p-8 hover:-translate-y-1 hover:shadow-lg transition-all duration-300">
            <h3 className="mb-4 text-xl font-bold uppercase tracking-widest text-pop-black">{labelSet.top}</h3>
            <p className="text-pop-black/80 font-light leading-relaxed">
              {topNotes || 'The initial, lighter smells of the fragrance.'}
            </p>
          </div>
          
          <div className="ui-shell-card p-8 hover:-translate-y-1 hover:shadow-lg transition-all duration-300">
            <h3 className="mb-4 text-xl font-bold uppercase tracking-widest text-pop-black">{labelSet.heart}</h3>
            <p className="text-pop-black/80 font-light leading-relaxed">
              {heartNotes || 'The core of the fragrance, emerging just after the top notes.'}
            </p>
          </div>
          
          <div className="ui-shell-card p-8 hover:-translate-y-1 hover:shadow-lg transition-all duration-300">
            <h3 className="mb-4 text-xl font-bold uppercase tracking-widest text-pop-black">{labelSet.base}</h3>
            <p className="text-pop-black/80 font-light leading-relaxed">
              {baseNotes || 'The deepest, richest scents that linger the longest.'}
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}