import React from 'react';
import ReactDOM from 'react-dom';
import { Accordion, Collapse } from 'furl-components';

ReactDOM.render(
  <div>
    <Accordion>
      <Collapse title="1. How do I create an egg wash?">
        To create an egg wash, whisk together a large egg with one tablespoon of water until smooth. Use as a glue to seal pastries, then brush on top for a glossy appearance.
      </Collapse>
      <Collapse title="2. How do I easily peel tomatoes?">
        Peel tomatoes with ease! Cut an X in the top, and then simmer in a pot of hot water for 15 to 30 seconds. Cool down and the skin will fall right off.
      </Collapse>
    </Accordion>
    <Accordion 
      fill='flat' 
      openIndex={1}
      data={[
        {
          title: '1. How do I create an egg wash?',
          content: 'To create an egg wash, whisk together a large egg with one tablespoon of water until smooth. Use as a glue to seal pastries, then brush on top for a glossy appearance.'
        },
        {
          title: '2. How do I easily peel tomatoes?',
          content: 'Peel tomatoes with ease! Cut an X in the top, and then simmer in a pot of hot water for 15 to 30 seconds. Cool down and the skin will fall right off.'
        }
      ]}
    />
  </div>, 
  document.getElementById('root')
);