import { Link } from 'react-router'

import { ChevronIcon } from '~/components/icons/chevron'
import { NotificationIcon } from '~/components/icons/notification'
import { useAdminContext } from '~/contexts/admin'
import { APP } from '~/data/meta'

export const Navbar = () => {
  const { adminProfile } = useAdminContext()

  return (
    <div className="flex h-20 items-center justify-between border-b border-[#ECECEC] bg-white px-10 py-5">
      <Link
        to="/news"
        className="h-full"
      >
        <img
          src={APP.logo}
          alt={APP.title}
          className="h-3/4 w-auto sm:h-full"
        />
      </Link>
      <div className="flex items-center gap-x-8">
        <div className="flex w-3xs items-center justify-between">
          <div className="flex items-center">
            <div className="mr-3 h-8 w-8 rounded-full bg-[#C4C4C4]" />
            <span className="text-xs">{adminProfile.name}</span>
          </div>
          <ChevronIcon className="opacity-50" />
        </div>
        <NotificationIcon
          className="text-[#B0C3CC]"
          showBadge={true}
        />
      </div>
    </div>
  )
}