import * as React from 'react';

import Accordion from '~/accordion/Accordion';
import AccordionGroup from '~/accordion/AccordionGroup';

// import '../../styles/globals.css';

export default {
  title: 'accordion/AccordionGroup',
  component: AccordionGroup,
  args: {},
};

export const Demo = () => (
  <AccordionGroup>
    <Accordion
      summary={<strong>When should I take Proper’s supplements?</strong>}
    >
      For best results, we suggest taking the supplements 30-40 minutes before
      bedtime with water.
    </Accordion>
    <Accordion
      summary={
        <strong>How long do the supplements take to begin working?</strong>
      }
    >
      Everyone metabolizes ingredients at different rates, but you should start
      feeling the benefits of supported, healthy sleep the first night that you
      take it. Continual sleep improvements will follow over the next 3-5 days,
      with full benefits realized after several weeks of usage.
    </Accordion>
    <Accordion
      summary={
        <strong>
          Are there any artificial colors or binders in the supplements?
        </strong>
      }
    >
      Nope. Proper’s natural, non-GMO supplements are made with botanical
      extracts and contain no artificial colors or binders. They're also vegan
      and gluten/dairy/sugar-free.
    </Accordion>
    <Accordion
      summary={
        <strong>
          Once I decide which supplement is best for me, is it safe to take
          long-term?
        </strong>
      }
    >
      Yes. Proper’s supplements are carefully formulated by Dr. Alice Hirschel,
      our resident PhD in Nutritional Biochemistry, and reviewed by a
      world-class panel of medical experts in sleep, integrative, and
      naturopathic medicine. They are drug-free, non-habit-forming, and safe to
      take for long-term sleep health—in fact, the efficacy of certain
      ingredients actually increases over time.
    </Accordion>
  </AccordionGroup>
);