import Image from 'next/image'
import React from 'react'
import logo from '@/assets/icons/maw-white.svg'
import Avatar from '@/assets/icons/avatar.svg'
import { Bell, MessageCircleMore } from 'lucide-react'
import { Input } from '../ui/input'
import { Button } from '../ui/button'
import Link from 'next/link'
import { useDispatch, useSelector } from 'react-redux'
import {
    Popover,
    PopoverContent,
    PopoverTrigger,
} from "@/components/ui/popover"
import { unsetAuthUser } from '@/store/slices/auth'

const DashboardHeader = () => {
    const dispatch = useDispatch()
    const user = useSelector((state: any) => state.auth.user)
    const logout = async () => {
        dispatch(unsetAuthUser())
    }
    return (
        <div className='border-b border-gray-500 relative z-10'>
            <div className='w-11/12 mx-auto px-5 py-2 flex items-center justify-between' >
                <Link href='/'>
                    <Image src={logo} width={50} height={50} alt="MAW" />
                </Link>
                <ul className='gap-5 hidden md:flex text-nowrap'>
                    <Link href="/">Home</Link>
                    <Link href="">About Us</Link>
                    <Link href="/contact-us">Contact Us</Link>
                    <Link href="">Explore</Link>
                </ul>
                <div className='hidden md:block rounded-full w-max overflow-hidden border border-white'>
                    <div className='flex'>
                        <Input className='!ring-0 !ring-offset-0 bg-transparent outline-none border-0' placeholder='Search' />
                        <Link href='/search'>
                            <Button className='rounded-l-none rounded-r-full'>Search</Button>
                        </Link>
                    </div>
                </div>
                <div className='hidden md:flex items-center gap-3'>
                    {
                        user && user?.name !== "" ?
                            <>
                                <MessageCircleMore />
                                <Bell />
                                <Popover>
                                    <PopoverTrigger>
                                        <Image src={Avatar} width={40} height={40} alt="MAW" className='rounded-full object-cover' />
                                    </PopoverTrigger>
                                    <PopoverContent className='flex flex-col max-w-60'>
                                        <Button onClick={() => logout()} variant='link'>Logout</Button>
                                    </PopoverContent>
                                </Popover>
                            </>
                            :
                            <>
                                <Link href='/sign-in'><Button variant='ghost'>Login</Button></Link>
                                <Link href='/register'><Button className='rounded-none'>Sign Up</Button></Link>
                            </>
                    }
                </div>
            </div >
        </div>
    )
}

export default DashboardHeader;