'use client';

import { useState } from 'react';
import Link from 'next/link';

interface MobileNavProps {
  blogOwner: string;
}

export default function MobileNav({ blogOwner }: MobileNavProps) {
  const [isOpen, setIsOpen] = useState(false);

  const toggleMenu = () => {
    setIsOpen(!isOpen);
  };

  return (
    <div className="sm:hidden">
      {/* Mobile menu button */}
      <button
        onClick={toggleMenu}
        className="fixed top-4 right-4 z-50 p-2 bg-white rounded-lg shadow-lg border border-gray-200"
        aria-label="Toggle mobile menu"
      >
        <svg
          className="w-6 h-6"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          {isOpen ? (
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M6 18L18 6M6 6l12 12"
            />
          ) : (
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M4 6h16M4 12h16M4 18h16"
            />
          )}
        </svg>
      </button>

      {/* Mobile menu overlay */}
      {isOpen && (
        <div className="fixed inset-0 z-40 bg-black bg-opacity-50" onClick={toggleMenu}>
          <div className="fixed top-0 right-0 w-64 h-full bg-white shadow-xl" onClick={(e) => e.stopPropagation()}>
            <div className="p-6">
              <h2 className="text-lg font-bold mb-6">{blogOwner}&apos;s Blog</h2>
              
              <nav className="space-y-4">
                <Link
                  href="/"
                  className="block py-2 px-3 rounded-lg hover:bg-gray-100 transition-colors"
                  onClick={toggleMenu}
                >
                  🏠 Home
                </Link>
                
                <Link
                  href="/admin"
                  className="block py-2 px-3 rounded-lg hover:bg-gray-100 transition-colors"
                  onClick={toggleMenu}
                >
                  🔐 Admin
                </Link>
                
                <Link
                  href="/posts/about"
                  className="block py-2 px-3 rounded-lg hover:bg-gray-100 transition-colors"
                  onClick={toggleMenu}
                >
                  👤 About Me
                </Link>
              </nav>

              <div className="mt-8 pt-6 border-t border-gray-200">
                <div className="text-sm text-gray-500">
                  &copy; {new Date().getFullYear()} {blogOwner}
                </div>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
} 