import { FormProvider } from "@ariakit/react";
import preview from "../../.storybook/preview.tsx";
import {
  Letterhead,
  LetterheadHeading,
  LetterheadParagraph,
  LetterheadSubmitButton,
} from "./index.tsx";

const meta = preview.meta({
  title: "Components/Letterhead",
  component: Letterhead,
  tags: ["autodocs"],
  args: {
    textAlign: "start",
  },
});

export const Default = meta.story({
  args: {
    children: (
      <>
        <LetterheadHeading align="center" margin="letterhead">
          Lorem ipsum dolor
        </LetterheadHeading>

        <LetterheadParagraph>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut enim ad
          minima veniam, quis <em>nostrum</em> exercitationem ullam corporis
          suscipit laboriosam.
        </LetterheadParagraph>

        <FormProvider>
          <LetterheadSubmitButton marginBlockStart="footerMargin">
            Lorem ipsum
          </LetterheadSubmitButton>
        </FormProvider>
      </>
    ),
  },
});