import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay } from 'swiper/modules';
import type { AnnouncementBarSectionPayload } from '../types';

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

interface DynamicAnnouncementBarProps {
  payload: AnnouncementBarSectionPayload;
}

export default function DynamicAnnouncementBar({ payload }: DynamicAnnouncementBarProps) {
  const { slides = [], backgroundColor = '#1F3D2D', textColor = '#FDFDF9', speed = 3000 } = payload;

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

  return (
    <div 
      className="announcement-bar w-full py-2.5 px-4 text-center text-[10px] sm:text-xs tracking-[0.2em] font-semibold uppercase relative z-30 overflow-hidden"
      style={{ backgroundColor, color: textColor }}
    >
      <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>
  );
}