import React, { useState } from 'react';
import { Link } from "react-router-dom";

const FireIcon = () => (
  <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 text-red-600" viewBox="0 0 20 20" fill="currentColor">
    <path fillRule="evenodd" d="M10 2a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 2zM5.505 5.505a.75.75 0 011.06 0l1.061 1.06a.75.75 0 01-1.06 1.06l-1.06-1.06a.75.75 0 010-1.06zM14.495 5.505a.75.75 0 010 1.06l-1.06 1.06a.75.75 0 01-1.06-1.06l1.06-1.06a.75.75 0 011.06 0zM10 4.5a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0V5.25A.75.75 0 0110 4.5zM7.163 15.163a.75.75 0 011.06 0l1.061 1.06a.75.75 0 01-1.06 1.06l-1.06-1.06a.75.75 0 010-1.06zM12.837 15.163a.75.75 0 010 1.06l-1.06 1.06a.75.75 0 01-1.06-1.06l1.06-1.06a.75.75 0 011.06 0zM10 18a1 1 0 01-1-1v-2.5a1 1 0 112 0V17a1 1 0 01-1 1z" clipRule="evenodd" />
    <path d="M10 18a8 8 0 100-16 8 8 0 000 16zM4.75 5.25a.75.75 0 000 1.5h10.5a.75.75 0 000-1.5H4.75z" />
    <path d="M10 18a8 8 0 100-16 8 8 0 000 16zM4.75 5.25a.75.75 0 000 1.5h10.5a.75.75 0 000-1.5H4.75z" />
    <path d="M12.96 5.04a5.5 5.5 0 01-5.92 0 1 1 0 00-1.08 1.68 7.5 7.5 0 008.08 0 1 1 0 00-1.08-1.68z" />
  </svg>
);


const Header = () => {
  const [isOpen, setIsOpen] = useState(false);

  const navLinks = [
    { name: 'Home', href: '/' },
    { name: 'Our Team', href: '/team/' },
    { name: 'Apparatus', href: '/apparatus/' },
    { name: 'Join Us', href: '/join/' },
    { name: 'Contact', href: '/contact/' },
  ];

  return (
    <header className="bg-gray-900 text-white shadow-md sticky top-0 z-50">
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-20">
          <a href="/" className="flex items-center space-x-2">
            <img src="https://newprovidencefire.org/wp-content/uploads/2020/09/cropped-favico-32x32.png" alt="Logo" className="h-8 w-8"/>
            <span className="text-xl font-bold tracking-tight">New Providence Fire Dept.</span>
          </a>
          <nav className="hidden md:flex items-center space-x-6">
            {navLinks.map((link) => (
              <Link
                key={link.name}
                to={link.href}
                className="text-gray-300 hover:text-white hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200"
              >
                {link.name}
              </Link>
            ))}
            <a
              href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=VCMML5H7AWYB2&source=url"
              target="_blank"
              rel="noopener noreferrer"
              className="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-lg transition-all duration-300 transform hover:scale-105"
            >
              Donate
            </a>
            {/* {navLinks.map((link) => (
              <a key={link.name} href={link.path} className="text-gray-300 hover:text-white hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200">
                {link.name}
              </a>
            ))} */}
          </nav>
          <div className="md:hidden flex items-center">
            <button onClick={() => setIsOpen(!isOpen)} className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
              <span className="sr-only">Open main menu</span>
              {isOpen ? (
                <svg className="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
              ) : (
                <svg className="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
                </svg>
              )}
            </button>
          </div>
        </div>
      </div>
      {isOpen && (
        <div className="md:hidden">
          <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
            {navLinks.map((link) => (
              <a key={link.name} href={link.href} className="text-gray-300 hover:text-white hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium transition-colors duration-200">
                {link.name}
              </a>
            ))}
            <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=VCMML5H7AWYB2&source=url" target="_blank" rel="noopener noreferrer" className="bg-red-600 hover:bg-red-700 text-white block w-full text-center mt-2 font-bold py-2 px-4 rounded-lg transition-all duration-300 transform hover:scale-105">
                Donate
            </a>
          </div>
        </div>
      )}
    </header>
  );
};

export default Header;

{/* {navLinks.map((link) => (
  <Link
    key={link.path}
    to={link.path}
    style={{
      color: location.pathname === link.path ? "yellow" : "white",
      fontWeight: location.pathname === link.path ? "bold" : "normal",
      textDecoration: "none",
    }}
  >
    {link.title}
  </Link>
))} */}