#StepIndicator

<StepIndicator
  use_navigation="true"
  active_item={1}
  on_change={({ currentItem }) => {
    console.log('on_change', currentItem)
  }}
  data={[
    {
      title: 'Om din nye bolig',
    },
    {
      title: 'Ditt lån og egenkapital',
      on_click: ({ currentItem }) =>
        console.log(currentItem)
    },
    {
      title: 'Oppsummering',
    }
  ]}
/>

function CustomStepIndicator({ children, ...props }) {
  const [step, setStep] = React.useState(0)
  return (
    <>
      <StepIndicator
        use_navigation
        active_item={step}
        on_change={({ currentItem }) => setStep(currentItem)}
        {...props}
      />
      <Section style_type="lavender" spacing>
        {children(step)}
      </Section>
    </>
  )
}
render(<CustomStepIndicator
	data={
	[
		{
			title: 'First',
			is_active: true
		},
		{
			title: 'Second',
			is_active: true
		},
		{
			title: 'Last',
			is_active: true
		}
	]
	}
>
	{(step) => {
		switch (step) {
			case 0:
				return <>Step One</>
			case 1:
				return <>Step Two</>
			default:
				return <>Fallback</>
		}
	}}
</CustomStepIndicator>)

<StepIndicator
  data={[
    {
      title: 'Om din nye bolig'
    },
    {
      title: 'Ditt lån og egenkapital'
    },
    {
      title: 'Oppsummering',
      is_current: true
    }
  ]}
/>

<StepIndicator
  active_item="1"
  data={[
    'Om din nye bolig',
    'Ditt lån og egenkapital',
    'Oppsummering'
  ]}
/>

<StepIndicator
  use_navigation
  active_item={1}
  on_change={({ currentItem }) => {
    console.log('on_change', currentItem)
  }}
  on_item_render={({ StepItem }) => {
    return (
      <StepItem
        onClick={e => console.log(e)}
      />
    )
  }}
  data={[
    {
      title: 'Om din nye bolig',
    },
    {
      title: 'Ditt lån og egenkapital',
      on_click: ({ currentItem }) =>
        console.log(currentItem),
      on_render: ({ StepItem, props, params }) => (
        <StepItem
          onClick={e => console.log(e)}
        />
      )
    },
    {
      title: 'Oppsummering',
      /*
        We can also overwrite the states
        is_active: true
        is_current: true
      */
    }
  ]}
/>