import React from 'react';
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { navigationItems } from './navRoutes';

interface MobileNavProps {
  isOpen: boolean;
}

export const MobileNav: React.FC<MobileNavProps> = ({ isOpen }) => {
  if (!isOpen) return null;

  return (
    <div className="md:hidden absolute top-full left-0 right-0 bg-white border-t shadow-lg">
      <nav className="px-4 py-2">
        {navigationItems.map((item :Record<string,any> , index : number) => (
          <Link
            key={item.title}
            href={item.href}
            className="flex items-center px-4 py-3 hover:bg-gray-100 rounded-md"
          >
            <item.icon className="mr-3 h-5 w-5" />
            <span>{item.title}</span>
          </Link>
        ))}
        <div className="px-4 py-3">
          <Button className="w-full">
            Login
          </Button>
        </div>
      </nav>
    </div>
  );
};