import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay } from 'swiper/modules';
import type { AnnouncementBarSectionPayload } from '../types';
import { useTranslation } from 'react-i18next';
import { getLocalizedField } from '../utils/localization';

// Import Swiper styles
import 'swiper/css';

interface DynamicAnnouncementBarProps {
  payload: AnnouncementBarSectionPayload;
}

export default function DynamicAnnouncementBar({ payload }: DynamicAnnouncementBarProps) {
  const { i18n } = useTranslation();
  const lang = i18n.language;
  const { speed = 3000 } = payload;
  const slides = (payload.slides || []).map((slide) => getLocalizedField(slide, lang));

  if (slides.length === 0) return null;

  return (
    <div
      className="announcement-bar relative z-30 w-full overflow-hidden px-4 py-2.5 text-center text-[10px] font-semibold uppercase tracking-[0.2em] sm:text-xs bg-pop-black text-pop-bg"
    >
      <Swiper
        modules={[Autoplay]}
        autoplay={{ delay: speed, disableOnInteraction: false }}
        loop={slides.length > 1}
        className="w-full select-none"
      >
        {slides.map((slide, idx) => (
          <SwiperSlide key={idx} className="flex items-center justify-center">
            <span className="inline-block truncate max-w-full">{slide}</span>
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  );
}