Section

import { Section } from "@/components/layout/section";
import { Heading, Text } from "@/components/typography";
import { Button } from "@/components/ui/button";

const tones = ["light", "gray", "dark"] as const;

export default function SectionTones() {
  return (
    <div className="flex w-full flex-col">
      {tones.map((tone) => (
        // The section rhythm is reduced here so all three fit
        <Section key={tone} tone={tone} className="py-10 md:py-10 lg:py-10">
          <div className="flex flex-wrap items-center justify-between gap-4">
            <div>
              <Heading as="h3" size="title-5">
                tone=&quot;{tone}&quot;
              </Heading>
              <Text tone="secondary">Every color inside follows the section.</Text>
            </div>
            <Button variant="secondary">Secondary</Button>
          </div>
        </Section>
      ))}
    </div>
  );
}