'use client';

import { Icon } from '@iconify/react';
import Menu from '@/components/menu/Menu';
import MenuItem from '@/components/menu/MenuItem';
import Button from '@/components/Button';

interface NavbarProps {
  title: string;
  toggleSidebar?: () => void;
}

const Navbar = ({ title, toggleSidebar }: NavbarProps) => {
  return (
    <div className='navbar px-4 bg-base-100 shadow-sm'>
      <div className='flex-1'>
        <div className='flex flex-row items-center gap-4'>
          {toggleSidebar && (
            <Button onClick={toggleSidebar} className='block lg:hidden'>
              <Icon
                icon='material-symbols:menu-rounded'
                width={24}
                height={24}
              />
            </Button>
          )}

          <span className='font-bold text-xl text-primary'>{title}</span>
        </div>
      </div>

      <div className='flex gap-2'>
        <div className='dropdown dropdown-end'>
          <div
            tabIndex={0}
            role='button'
            className='btn btn-ghost btn-circle avatar'
          >
            <div className='w-10 rounded-full border grid place-items-center'>
              <Icon icon='uil:user' width={40} height={40} />
            </div>
          </div>

          <Menu className='dropdown-content w-52 mt-3 p-2 bg-base-100 shadow rounded-box menu-sm'>
            <MenuItem title='Settings' href='#' />
            <MenuItem title='Logout' href='#' />
          </Menu>
        </div>
      </div>
    </div>
  );
};

export default Navbar;