import { useQuery } from '@tanstack/react-query'
import { fetchMe } from './api'

export function MeBadge() {
  const { data, isLoading, isError } = useQuery({ queryKey: ['me'], queryFn: fetchMe, retry: 0 })
  if (isLoading) return <span className="opacity-60">…</span>
  if (isError) return <span className="opacity-60">ej inloggad</span>
  return <span className="opacity-80 text-sm">{data?.name || data?.preferred_username || 'me'}</span>
}