'use client'

import { useState, useEffect } from 'react'
import { X } from 'lucide-react'

interface Banner {
  id: number
  title: string
  type: string
  description: string | null
  link: string | null
}

export default function RunningText({ banners }: { banners: Banner[] }) {
  const items = banners.filter(b => b.type === 'running_text')
  if (items.length === 0) return null

  const text = items.map(b => b.title + (b.description ? ' — ' + b.description : '')).join('  •  ')
  const doubled = text + '  •  ' + text

  return (
    <div className="bg-[#c8102e] text-white text-xs overflow-hidden h-8 flex items-center">
      <div className="animate-marquee whitespace-nowrap">
        <span dangerouslySetInnerHTML={{ __html: doubled }} />
      </div>
      <style>{`
        @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
        .animate-marquee { animation: marquee 30s linear infinite; display: inline-flex; }
      `}</style>
    </div>
  )
}