import React, { useState, useEffect } from 'react';
import { Logo } from '../assets/images';
import { Link } from 'react-router-dom';

const Navbar = () => {
  const messageCount = 5; // Example count for messages
  const notificationCount = 3; // Example count for notifications

  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.innerWidth < 600);
    };

    // Check the initial screen size
    handleResize();

    // Add event listener for window resize
    window.addEventListener('resize', handleResize);

    // Cleanup event listener on component unmount
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return (
    <nav className="sb-topnav navbar navbar-expand" style={{ backgroundColor: '#0542cc' }}>
      <Link to="/getting-started">
        <a className="navbar-brand ps-3 text-white d-flex align-items-center">
          {/* Logo Image */}
          <img 
            src={Logo}
            alt="Logo" 
            style={{ width: '30px', height: '30px', marginRight: '10px' }} // Adjust size as needed
          />
          Rekan Veri
        </a>
      </Link>
      
      <button
        className={`btn btn-link btn-sm order-1 order-lg-0 me-4 me-lg-0 text-white ${isMobile ? 'ms-auto' : ''}`}
        id="sidebarToggle"
        href="#!"
      >
        <i className="fas fa-bars"></i>
      </button>

      {/* Show navigation and search only on larger screens */}
      {!isMobile && (
        <>
          <div className="navbar-nav me-auto">
            <a className="nav-link text-white" href="/">Home</a>
            <a className="nav-link text-white" href="/">Contact</a>
          </div>

          <form className="d-none d-md-inline-block form-inline ms-auto me-0 me-md-3 my-2 my-md-0">
            <div className="input-group">
              <input
                className="form-control"
                type="text"
                placeholder="Search for..."
                aria-label="Search for..."
                aria-describedby="btnNavbarSearch"
              />
              <button className="btn btn-primary" id="btnNavbarSearch" type="button">
                <i className="fas fa-search"></i>
              </button>
            </div>
          </form>

          <ul className="navbar-nav ms-auto ms-md-0 me-3 me-lg-4">
            {/* Messages Dropdown with Count */}
            <li className="nav-item dropdown me-3 position-relative">
              <a
                className="nav-link dropdown-toggle text-white"
                id="messagesDropdown"
                href="#"
                role="button"
                data-bs-toggle="dropdown"
                aria-expanded="false"
              >
                <i className="fas fa-envelope fa-fw"></i>
                {messageCount > 0 && (
                  <span className="badge bg-danger badge-circle custom-badge">
                    {messageCount}
                  </span>
                )}
              </a>
              <ul className="dropdown-menu dropdown-menu-end" aria-labelledby="messagesDropdown">
                <li><a className="dropdown-item" href="#!">New Message</a></li>
                <li><a className="dropdown-item" href="#!">Inbox</a></li>
                <li><a className="dropdown-item" href="#!">Sent Messages</a></li>
              </ul>
            </li>

            {/* Notifications Dropdown with Count */}
            <li className="nav-item dropdown me-3 position-relative">
              <a
                className="nav-link dropdown-toggle text-white"
                id="notificationsDropdown"
                href="#"
                role="button"
                data-bs-toggle="dropdown"
                aria-expanded="false"
              >
                <i className="fas fa-bell fa-fw"></i>
                {notificationCount > 0 && (
                  <span className="badge bg-danger badge-circle custom-badge">
                    <strong>{notificationCount}</strong>
                  </span>
                )}
              </a>
              <ul className="dropdown-menu dropdown-menu-end" aria-labelledby="notificationsDropdown">
                <li><a className="dropdown-item" href="#!">New Notification</a></li>
                <li><a className="dropdown-item" href="#!">Alerts</a></li>
                <li><a className="dropdown-item" href="#!">Updates</a></li>
              </ul>
            </li>

            {/* Expand Dropdown */}
            <li className="nav-item dropdown me-3">
              <a
                className="nav-link dropdown-toggle text-white"
                id="expandDropdown"
                href="#"
                role="button"
                data-bs-toggle="dropdown"
                aria-expanded="false"
              >
                <i className="fas fa-expand fa-fw"></i>
              </a>
              <ul className="dropdown-menu dropdown-menu-end" aria-labelledby="expandDropdown">
                <li><a className="dropdown-item" href="#!">Full Screen</a></li>
                <li><a className="dropdown-item" href="#!">Windowed Mode</a></li>
              </ul>
            </li>

            {/* Apps Dropdown */}
            <li className="nav-item dropdown me-3">
              <a
                className="nav-link dropdown-toggle text-white"
                id="appsDropdown"
                href="#"
                role="button"
                data-bs-toggle="dropdown"
                aria-expanded="false"
              >
                <i className="fas fa-th fa-fw"></i>
              </a>
              <ul className="dropdown-menu dropdown-menu-end" aria-labelledby="appsDropdown">
                <li><a className="dropdown-item" href="#!">App 1</a></li>
                <li><a className="dropdown-item" href="#!">App 2</a></li>
                <li><a className="dropdown-item" href="#!">App 3</a></li>
              </ul>
            </li>
          </ul>
        </>
      )}
    </nav>
  );
};

export default Navbar;
