import { useAppDispatch, useAppSelector } from '../redux/hooks'
import { setShowUserOffcanvas } from '../redux/slices/identitySlice'

const UserButton = () => {
  const dispatch = useAppDispatch()
  const identity = useAppSelector((s) => s.identity.identity)

  if (!identity?.username)
    return null

  return (
    <button
      className={'bg-white text-blue-500 px-2 py-1 rounded'}
      onClick={() => dispatch(setShowUserOffcanvas())}
    >
      {identity.username}
    </button>
  )
}

export { UserButton }
