import { StackedMarqueeSection, type MarqueeRow } from "@/components/layout/stacked-marquee-section";
import { AppCard } from "@/components/ui/app-card";
import { SectionHeading } from "./section-heading";
import type { MarqueeSectionCopy } from "./types";

type MarqueeSectionProps = {
  copy: MarqueeSectionCopy;
  rows: MarqueeRow[];
};

export function MarqueeSection({ copy, rows }: MarqueeSectionProps) {
  return (
    <section className="space-y-8 overflow-hidden">
      <SectionHeading
        eyebrow={copy.eyebrow}
        title={copy.title}
        description={copy.description}
      />

      <AppCard className="overflow-hidden">
        <div className="rounded-nested border border-border/70 bg-background py-6">
          <StackedMarqueeSection rows={rows} className="py-0" />
        </div>
      </AppCard>
    </section>
  );
}