import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { useChatConfig } from '../../../context/chatConfig'
import { useCurrentUser } from '@/hooks/auth'
import Link from 'next/link'

const CrushLevelAvatarGroup = () => {
  const { aiInfo, aiId } = useChatConfig()
  const { data: currentUser } = useCurrentUser()
  const { headImage: currentUserHeadImg } = currentUser || {}
  const { headImg, nickname } = aiInfo || {}

  return (
    <div className="flex h-[124px] items-center justify-between px-[42]">
      <Link className="h-20 w-20" href={`/@${aiId}`}>
        <Avatar className="h-20 w-20">
          <AvatarImage src={headImg} />
          <AvatarFallback>{nickname?.slice(0, 1)}</AvatarFallback>
        </Avatar>
      </Link>

      <Link className="h-20 w-20" href={`/profile`}>
        <Avatar className="h-20 w-20">
          <AvatarImage src={currentUserHeadImg} />
          <AvatarFallback>{currentUser?.nickname?.slice(0, 1) || ''}</AvatarFallback>
        </Avatar>
      </Link>
    </div>
  )
}

export default CrushLevelAvatarGroup
