import {CircleUserRound} from 'lucide-react'
import Link from 'next/link'

import {auth} from '@/auth'
import {avatarFallback} from '@/lib/utils'
import {Avatar, AvatarFallback, AvatarImage} from '@/ui/avatar'

export default async function CabinetButton() {
	const session = await auth()

	return (
		<Link href='/cabinet' className='header-button' aria-label='Кабінет'>
			<button className='flex flex-col items-center' role='button'>
				{session ? (
					<>
						<Avatar className='hs1-[21px] w1-[21px] border2-2 border2-brand-violet'>
							<AvatarImage src={session.user?.image as string} alt='avatar' />
							<AvatarFallback className='text-xs'>
								{avatarFallback(session.user?.name as string)}
							</AvatarFallback>
						</Avatar>
					</>
				) : (
					<>
						<CircleUserRound className='h-[21px] w-[21px]' />
						GA4_Ecommerce_View_Item_List_Trigger
					</>
				)}
				{/*<span className='text-sm'>Кабінет</span>*/}
			</button>
		</Link>
	)
}