import {
  Container,
} from '@chakra-ui/react'
import {
  Tab,
  Divider,
} from 'semantic-ui-react'
import React, { useState } from 'react'
import { Redirect } from 'react-router-dom'

const Navigation = () => {
  const [activeIndex, setActiveIndex] = useState(0)

  const panes = [
    {
      menuItem: 'Home',
      render: () => <Redirect to="/"/>,
    },
    {
      menuItem: 'Image',
      render: () => <Redirect to="/docker/image/list"/>,
    },
    {
      menuItem: 'Container',
      render: () => <Redirect to="/docker/container/list"/>,
    },
  ]

  return (
    <Container>
      <Divider hidden/>
      <Tab
        panes={panes}
        menu={{ secondary: true, pointing: true }}
        onTabChange={(e, { activeIndex }) => setActiveIndex(activeIndex)}
      />
    </Container>
  )
}

export default Navigation