import Link from 'next/link'
import Image from 'next/image'
import clsx from 'clsx'

import { useUser } from '../hooks/use-user'

export function ManifoldLogo(props: {
  className?: string
  darkBackground?: boolean
}) {
  const { darkBackground, className } = props

  const user = useUser()

  return (
    <Link href={user ? '/home' : '/'}>
      <a className={clsx('flex flex-row gap-4 flex-shrink-0', className)}>
        <Image
          className="hover:rotate-12 transition-all"
          src={darkBackground ? '/logo-white.svg' : '/logo.svg'}
          width={45}
          height={45}
        />
        <div
          className={clsx(
            'sm:hidden font-major-mono lowercase mt-1 text-lg',
            darkBackground && 'text-white'
          )}
        >
          Manifold
          <br />
          Markets
        </div>
        <div
          className={clsx(
            'hidden sm:flex font-major-mono lowercase mt-1 sm:text-2xl md:whitespace-nowrap',
            darkBackground && 'text-white'
          )}
        >
          Manifold Markets
        </div>
      </a>
    </Link>
  )
}