import { Link } from 'react-router-dom'

import Separator from '@/components/MenuSeparator'
import { cn } from '@/lib/utils'

import type { FC } from 'react'

import type { User } from '@/types'

type Props = { user:  User | null,
	       sp?:   boolean }


export default (({ user, sp }: Props) => {
  if (!(user))
    return

  const className = cn ((sp
			 ? 'md:hidden w-full min-h-[40px] flex items-center pl-8'
			 : 'hidden md:block ml-auto pr-4'),
		        'font-bold text-red-600 hover:text-red-400',
		        'dark:text-yellow-400 dark:hover:text-yellow-200')

  return (
      <>
	{sp && <Separator/>}
	<Link to="/users/settings"
	      className={className}>
	  {user.name || '名もなきニジラー'}
	</Link>
      </>)
}) satisfies FC<Props>