import { useSettings } from '../../context/SettingsContext'

/**
 * Scrolling notice bar. Renders NOTHING (no reserved space) when the admin
 * has not set a marquee notice.
 */
export default function Marquee() {
  const { settings } = useSettings()
  const m = settings?.marquee
  if (!m || !m.text) return null

  // Duplicate the text so the -50% translate loop is seamless.
  const speed = Math.max(5, Number(m.speed) || 30)
  const content = m.link ? (
    <a href={m.link} target="_blank" rel="noreferrer" className="hover:underline">
      {m.text}
    </a>
  ) : (
    m.text
  )

  return (
    <div
      className="overflow-hidden whitespace-nowrap py-1.5 text-sm font-medium"
      style={{ background: m.bg, color: m.color }}
    >
      <div
        className="animate-marquee inline-block"
        style={{ animationDuration: `${speed}s` }}
      >
        <span className="mx-8 inline-block">{content}</span>
        <span className="mx-8 inline-block" aria-hidden>
          {content}
        </span>
      </div>
    </div>
  )
}
