import { h, type FunctionComponent } from 'preact'
import { Show } from '@preact/signals/utils'
import { useComputed } from '@preact/signals'
import cn from 'classnames'

import { useAuth } from '../../shared/contexts/auth.tsx'
import s from './current_user.module.scss'

const CurrentUser: FunctionComponent<{ className?: string }> = ({ className }) => {
  const { user } = useAuth()
  const noUser = useComputed(() => !user.value)

  return (
    <div className={cn(s.base, className)}>
      <Show when={user}>
        <div className={s.email}>{user.value?.email}</div>

        <div className={s.links}>
          <a href='/auth/logout' target='_parent'>
            Logout
          </a>
        </div>
      </Show>
      <Show when={noUser}>
        <div className={cn(s.base, className)}>
          <p>You are not logged in</p>

          <div className={s.links}>
            <a href='/login'>Login</a>
            <a href='/register'>Register</a>
          </div>
        </div>
      </Show>
    </div>
  )
}

export default CurrentUser