'use client'

import { Link } from '../common/Link'
import { usePathname } from 'next/navigation'
import {
    HomeIcon,
    BookOpenIcon,
    UserGroupIcon,
    UserIcon
} from '@heroicons/react/24/outline'

const navigation = [
    { name: 'Home', href: '/', icon: HomeIcon },
    { name: 'Journal', href: '/thejournal', icon: BookOpenIcon },
    { name: 'Forum', href: 'https://forum.morethanadiagnosis.org', icon: UserGroupIcon },
    { name: 'Profile', href: '/profile', icon: UserIcon },
]

export function MobileNav() {
    const pathname = usePathname()

    return (
        <div className="md:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 pb-safe">
            <div className="flex justify-around items-center h-16">
                {navigation.map((item) => {
                    const isActive = pathname === item.href
                    return (
                        <Link
                            key={item.name}
                            href={item.href}
                            variant="neutral"
                            className={`flex flex-col items-center justify-center w-full h-full space-y-1 ${isActive ? 'text-primary-600' : 'text-gray-500 hover:text-gray-900'
                                }`}
                        >
                            <item.icon
                                className={`h-6 w-6 ${isActive ? 'text-primary-600' : 'text-gray-400'}`}
                                aria-hidden="true"
                            />
                            <span className="text-xs font-medium">{item.name}</span>
                        </Link>
                    )
                })}
            </div>
        </div>
    )
}