import { Navbar, Nav} from 'react-bootstrap';
import { FaChartLine } from 'react-icons/fa';

const AppNavbar = () => {
  return (
    <Navbar 
      className="fixed-top w-100 shadow-sm d-flex justify-content-between"
      style={{ zIndex: 1030, padding: '15px 20px' }}
    >
      <Navbar.Brand href="#home" style={{ marginLeft: '20px', fontWeight: 'bold'}}>
        <FaChartLine style={{ marginRight: '10px', color: '#b31e1e' }} />
        Speedtest Tracker
      </Navbar.Brand>
      <Nav>
        <Nav.Item className="d-flex align-items-center" style={{ fontWeight: 'bold' }}>
          Damar
        <img 
            src="/src/assets/react.svg" 
            alt="Profile" 
            style={{ 
              width: '30px', 
              height: '30px', 
              borderRadius: '50%', 
              marginLeft: '10px' 
            }}
          />
        </Nav.Item>
      </Nav>
    </Navbar>
  );
};

export default AppNavbar;