"use client"
import { Button } from '@/components/ui/button'
import { BriefcaseBusiness, CalendarClock, Clock, Settings } from 'lucide-react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import React, { useEffect, useState } from 'react'


const menu = [
    {
        id: 1,
        name: 'Meeting',
        path: '/dashboard/meeting',
        icon: BriefcaseBusiness
    },
    {
        id: 2,
        name: 'Scheduled Meeting',
        path: '/dashboard/scheduled_meeting',
        icon: CalendarClock
    },
    {
        id: 3,
        name: 'Availability',
        path: '/dashboard/availability',
        icon: Clock
    },
    {
        id: 4,
        name: 'Setting',
        path: '/dashboard/setting',
        icon: Settings
    }        
]

const SideNav = () => {
    
    const path = usePathname();
    const [activePath, setActivePath] = useState(path);

    useEffect(() => {
        path && setActivePath(path)
    }, [path])

  return (
    <div className='px-5 py-10'>
        <div className='flex justify-center'>
            <p className='text-xl uppercase font-semibold tracking-wide'>Schedule.Me</p>
        </div>
        <Link href={'/create_meeting'}>
            <Button className="flex gap-2 w-full mt-10">Create</Button>
        </Link>
        <div className='mt-5'>
            {menu.map((item, index) => (
                <Link href={item.path} key={index}>
                    <Button variant="ghost" className={`w-full flex justify-start gap-2 mt-2 hover:bg-gray-200 ${activePath == item.path && 'bg-gray-200'}`}>
                        <item.icon/>
                        {item.name}
                    </Button>
                </Link>
            ))}
        </div>
    </div>
  )
}

export default SideNav