import { SoundOutlined } from '@ant-design/icons'
import { useQuery } from '@tanstack/react-query'

import { fetchWorkerAnnouncement } from '@/services/worker'

export default function WorkerAnnouncementBanner() {
  const announcementQuery = useQuery({
    queryKey: ['worker-announcement'],
    queryFn: fetchWorkerAnnouncement,
    retry: false,
  })
  const announcement = announcementQuery.data?.data
  const content = String(announcement?.content || '').trim()

  if (!announcement?.enabled || !content) return null

  return (
    <section className="worker-announcement" aria-label="平台公告">
      <span className="worker-announcement-label">
        <SoundOutlined /> 公告
      </span>
      <div className="worker-announcement-viewport">
        <div className="worker-announcement-track">
          <span>{content}</span>
          <span aria-hidden="true">{content}</span>
        </div>
      </div>
    </section>
  )
}
