'use client'

import { useTheme } from 'next-themes'
import Image from 'next/image'
import { useEffect, useState } from 'react'

export default function Logo() {
  const { resolvedTheme } = useTheme()
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) return null // Prevents SSR mismatch

  return (
    <Image
      src={resolvedTheme === 'dark' ? '/WhiteLogo.png' : '/BlackLogo.png'}
      width={32}
      height={32}
      alt="nuvex"
    />
  )
}