import AddDevice from './AddDevice/AddDevice';
import { Col, Nav, Row, Tab } from 'react-bootstrap';
import AddSplitter from './AddSplitter/AddSplitter';
import AddOnu from './AddOnu/AddOnu';

const ClusterAddComponents = () => {
    return (
        <Tab.Container id='left-tabs-example' defaultActiveKey='addDevice'>
            <Row>
                <Col sm={2}>
                    <Nav variant='pills' className='flex-column'>
                        <Nav.Item>
                            <Nav.Link eventKey='addDevice'>Add Device</Nav.Link>
                        </Nav.Item>
                        <Nav.Item>
                            <Nav.Link eventKey='addSplitter'>
                                Add Splitter
                            </Nav.Link>
                        </Nav.Item>
                        <Nav.Item>
                            <Nav.Link eventKey='addOnu'>Add ONU</Nav.Link>
                        </Nav.Item>
                    </Nav>
                </Col>
                <Col sm={10}>
                    <Tab.Content>
                        <Tab.Pane eventKey='addDevice'>
                            <AddDevice />
                        </Tab.Pane>
                        <Tab.Pane eventKey='addSplitter'>
                            <AddSplitter />
                        </Tab.Pane>
                        <Tab.Pane eventKey='addOnu'>
                            <AddOnu />
                        </Tab.Pane>
                    </Tab.Content>
                </Col>
            </Row>
        </Tab.Container>
    );
};

export default ClusterAddComponents;
