import { Badge } from "@/components/ui/badge";
import { topicChips } from "@/content/tracks";
import { Section } from "@/components/layout/Section";

export function TopicMarquee() {
  const items = [...topicChips, ...topicChips];
  return (
    <Section variant="muted" className="py-12 overflow-hidden">
      <h2 className="mb-8 text-center text-2xl font-bold">Topics shaping the summit</h2>
      <div className="flex overflow-hidden">
        <div className="marquee flex shrink-0 gap-3">
          {items.map((topic, i) => (
            <Badge
              key={`${topic}-${i}`}
              variant="secondary"
              className="shrink-0 rounded-full border-white/25 bg-white/15 px-4 py-2 text-sm text-white"
            >
              {topic}
            </Badge>
          ))}
        </div>
      </div>
    </Section>
  );
}