import { useEffect, useState } from 'react';
import { videoApi } from '../lib/api';
import styles from './AnnouncementBanner.module.css';

export function AnnouncementBanner() {
  const [text, setText] = useState('');
  const [dismissed, setDismissed] = useState(false);

  useEffect(() => {
    videoApi.getAnnouncement().then(({ data }) => {
      if (data.enabled && data.announcement) {
        setText(data.announcement);
      }
    }).catch(() => {});
  }, []);

  if (!text || dismissed) return null;

  return (
    <div className={styles.banner}>
      <svg className={styles.icon} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
        <path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0" />
      </svg>
      <div className={styles.marqueeWrapper}>
        <span className={styles.marqueeText}>{text}</span>
      </div>
      <button className={styles.closeBtn} onClick={() => setDismissed(true)} title="关闭">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
          <path d="M18 6L6 18M6 6l12 12" />
        </svg>
      </button>
    </div>
  );
}