import React from 'react';
import ReactDOM from 'react-dom';
import { Steps, Step, Text } from 'furl-components';

ReactDOM.render(
  <div>
    <Steps alignment='vertical'>
      <Step>Pricing Plan<Text textStyle='small'>Choose the plan that's best for you.</Text></Step>
      <Step>Personal Information<Text textStyle='small'>Add your personal and contact information.</Text></Step>
      <Step selected>Billing Information<Text textStyle='small'>Add a payment method to your account.</Text></Step>
      <Step>Checkout<Text textStyle='small'>Review your choices and pay for your plan.</Text></Step>
    </Steps>
    <Steps data={[
      'Pricing Plan',
      (<>Personal Information<Text textStyle='small'>Add your personal and contact information.</Text></>),
      {
        selected: true,
        content: 'Billing Information'
      },
      (<>Checkout<Text textStyle='small'>Review your choices and pay for your plan.</Text></>)
    ]} />
  </div>, 
  document.getElementById('root')
);