import 'twin.macro';

import * as React from 'react';

import Accordion from '~/accordion/Accordion';
import { H2, P } from '~/typography/Type';

export default {
  title: 'Accordion/Accordion',
  component: Accordion,
  args: {
    children: (
      <>
        <H2>We believe everyone deserves Proper sleep.</H2>

        <P>So we created a new sleep wellness company.</P>

        <P>
          One that goes beyond a quick-fix to help you rebuild long-term sleep
          health.
        </P>

        <P>
          One that understands that sleep is personal and considers your
          individual habits and lifestyle.
        </P>

        <P>
          One that takes a holistic approach by combining high-quality
          supplements with coaching.
        </P>

        <P>
          We're probably the only ones obsessing over your sleep as much as you
          are. But it's because we know how much it matters.
        </P>

        <P>We know that it affects your life outside of the bedroom.</P>

        <P>
          We know that you've tried everything to fix it, and then tried it
          again.
        </P>

        <P>
          We know that the sleep industry has let you down, and we know that
          you're tired.
        </P>

        <P>That's why we're not messing around.</P>

        <P>Here's to the end of tossing + turning.</P>
      </>
    ),
    summary: <>Learn more about Proper</>,
  },
  decorators: [(Story) => <div tw="max-w-sm">{Story()}</div>],
};

const Template = (args) => {
  return <Accordion {...args} />;
};

export const Default = Template.bind({});