'use client'

import React from 'react'
import Link from 'next/link'
import Image from 'next/image'
import Button from './ui/Button'
import useUserStore from '@/app/store/userStore'

const UserLogin = () => {
  const { isAuthenticated, user } = useUserStore()
  const isUserAuth = isAuthenticated && user

  // определяем отображаемое имя и путь для редиректа
  const getDisplayNameAndPath = () => {
    if (isUserAuth) {
      return {
        name: user?.name || 'пользователь',
        path: '/account',
      }
    }

    return {
      name: 'Зарегистрироваться',
      path: '/register',
    }
  }

  const { name, path } = getDisplayNameAndPath()

  if (!isUserAuth) {
    return (
      <>
        <div className="hidden md:block text-base font-medium">
          <Link
            href="/register"
            className="hover:text-orange transition-colors"
          >
            Регистрация
          </Link>
          <span> / </span>
          <Link href="/login" className="hover:text-orange transition-colors">
            Войти
          </Link>
        </div>
        <div className="md:hidden">
          <Link href="/login">
            <Image
              src="/images/userlogo.png"
              alt="user"
              width={24}
              height={24}
            />
          </Link>
        </div>
      </>
    )
  }

  return (
    <Link href={path} className="ml-2 sm:ml-5">
      <Button
        text={isUserAuth ? `Привет, ${name}!` : name}
        className="hidden md:flex text-sm sm:text-base py-2 sm:py-3 px-3 sm:px-4 bg-orange text-white items-center rounded-2xl whitespace-nowrap hover:bg-orange/80"
      />
      <Image
        src="/images/userlogo.png"
        alt="user"
        width={24}
        height={24}
        className="md:hidden"
      />
    </Link>
  )
}

export default UserLogin