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

export function TopicMarquee() {
  const items = [...topicChips, ...topicChips];
  return (
    <Section id="topics" className="overflow-hidden py-12">
      <TopoProseSurface className="mx-auto mb-8 max-w-3xl text-center">
        <p className="text-xs font-semibold uppercase tracking-widest text-[#37a47a]">
          Program themes
        </p>
        <h2 className="mt-2 text-2xl font-bold text-[#30614c] md:text-3xl">
          Topics shaping the summit
        </h2>
      </TopoProseSurface>
      <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 border-[#37a47a]/15 bg-[#e8f2ec] px-4 py-2 text-sm text-[#37a47a]"
            >
              {topic}
            </Badge>
          ))}
        </div>
      </div>
    </Section>
  );
}
