import React, { useState } from 'react'

import MyComponent from 'react-browser-tabs'

const Example = () => {
  const defaultTabs = [
    {
      title: 'getting started',
      url: 'https://google.com/', // auto fetch url
      id: 'tab1',
      content: (props) => <span>Hello World</span>
    }
  ]
  const tabs = useState(defaultTabs)
  const activeTab = useState(0)

  return (
    <BrowserTabs
      onAddTabPress={addTab} // CallBack for a Tab Add
      theme={isDark ? Dark : Light} // Theming
      injectProps={{ isDark, setisDark }} // custom props that you needed it to be injected.
      activeTab={activeTab} // keep a track of active index via state.
      tabs={tabs} // tabs
    />
  )
}

const addTab = () => {
  activeTab[1](tabs[0].length)
  tabs[1]([
    ...tabs[0],
    {
      title: 'New Tab ',
      url: 'https://rajaosama.me/',
      id: 'tab1',
      content: (props) => (
        <span style={{ color: props.isDark ? 'white' : 'black' }}>
          New Tab Opened
        </span>
      )
    }
  ])
}