import React from 'react';
import {
    RuxClock,
    RuxGlobalStatusBar,
    RuxIcon,
    RuxMenu,
    RuxMenuItem,
    RuxMenuItemDivider,
    RuxPopUp
} from "@astrouxds/react";
import {Link} from "react-router-dom";

const Header = () => {
  return (
    <div style={{marginBottom: '10px'}}>
        <RuxGlobalStatusBar include-icon="false" username="" app-domain=""
                                app-name="" app-version="">
                                <div style={{
                    display: 'flex',
                    flexDirection: 'row',
                    alignItems: 'center',
                    justifyContent: 'space-between',
                    width: '100%'
                }}>
                
                <div >
                        <h2>Transactions-Receipts</h2>
                    </div>
                   
                    <div>
                    <RuxPopUp open="false" placement="left-start" style={{margin: '0 0 0 auto'}}>
                    <RuxIcon icon="apps" slot="trigger"/>
                    
                    <RuxMenu>
                                    <div>
                                        <Link to="/transactions">
                                            <RuxMenuItem>Transactions</RuxMenuItem>
                                        </Link>
                                        <Link to="/receipts">
                                            <RuxMenuItem>Receipts</RuxMenuItem>
                                        </Link>
                                    </div>
                    </RuxMenu>
                    </RuxPopUp>
                    </div>

                    </div>
                    </RuxGlobalStatusBar>
    </div>
  )
}

export default Header