import React from 'react';
import { Link } from '@inertiajs/react';
import { useActiveRoute } from '../../../hooks/useActiveRoute';
import logo from '../../../../../public/images/logo/main-logo.png';

const Navbar = () => {
  const { getLinkClass } = useActiveRoute();

  return (
    <>
      <nav className="navbar navbar-expand-lg navbar-light bg-white border-bottom py-3">
        <div className="container">
          {/* Brand/Logo Section */}
          <Link href="/" className="navbar-brand d-flex align-items-center">
            <img
              src={logo}
              alt="Logo"
              className="me-2"
              style={{ borderRadius: '50%' }}
            />
            <div className="d-flex flex-column" style={{ lineHeight: '1.2' }}>
              <span className="fw-bold fs-5 text-dark">Fajlul Karim Trust</span>
              <small className="text-muted" style={{ fontSize: '10px' }}>
                Sayed Fajlul Karim Islamic Research Centre
              </small>
            </div>
          </Link>

          {/* Mobile Toggle Button */}
          <button
            className="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#mainNavbar"
            aria-controls="mainNavbar"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span className="navbar-toggler-icon"></span>
          </button>

          {/* Nav Links */}
          <div className="collapse navbar-collapse" id="mainNavbar">
            <ul className="navbar-nav ms-auto mb-2 mb-lg-0 align-items-lg-center fw-semibold">
              <li className="nav-item">
                <Link href="/" className={getLinkClass('/')}>হোম</Link>
              </li>
              <li className="nav-item px-lg-2">
                <Link href="/about-us" className={getLinkClass('/about-us')}>আমাদের সম্পর্কে</Link>
              </li>
              <li className="nav-item px-lg-2">
                <Link href="/founder-and-advisor" className={getLinkClass('/founder-and-advisor')}>প্রতিষ্ঠাতা ও উপদেষ্টা</Link>
              </li>
              <li className="nav-item px-lg-2">
                <Link href="/activities" className={getLinkClass('/activities')}>কার্যক্রম</Link>
              </li>
              <li className="nav-item px-lg-2">
                <Link href="/gallery" className={getLinkClass('/gallery')}>গ্যালারি</Link>
              </li>
              <li className="nav-item px-lg-2">
                <Link href="/contact" className={getLinkClass('/contact')}>যোগাযোগ</Link>
              </li>

              {/* Donation Button */}
              <li className="nav-item ms-lg-3 mt-2 mt-lg-0">
                <Link
                  href="/daily-donation"
                  className="btn btn-success px-4 py-2 rounded-pill shadow-sm"
                  style={{ backgroundColor: '#008542', border: 'none' }}
                >
                  দান করুন
                </Link>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </>
  );
};

export default Navbar;
