crush-level-web/src/app/(main)/user/[userId]/components/GiftGrid.tsx

'use client'
import Empty from '@/components/ui/empty'
import { useGetAIUserGifts } from '@/hooks/aiUser'
import { formatNumberToKMB } from '@/lib/utils'
import Image from 'next/image'

export function GiftGrid({ userId }: { userId: string }) {
  const { data } = useGetAIUserGifts({ aiId: Number(userId), page: { pn: 1, ps: 100 } })
  const { datas } = data || {}

  if (datas && !datas.length) {
    return (
      <div className="flex w-full flex-col items-start justify-start gap-4 rounded-2xl bg-[#352e3e] p-6">
        <h3 className="font-['Poppins'] text-[20px] leading-[24px] font-semibold text-white">
          Gifts
        </h3>

        <div className="w-full py-20">
          <Empty title="No gifts yet" />
        </div>
      </div>
    )
  }

  return (
    <div className="flex w-full flex-col items-start justify-start gap-4 rounded-2xl bg-[#352e3e] p-6">
      <h3 className="font-['Poppins'] text-[20px] leading-[24px] font-semibold text-white">
        Gifts
      </h3>

      <div className="grid w-full gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6">
        {datas?.map((gift) => (
          <div key={gift.id} className="flex flex-col items-start justify-start gap-1">
            <div className="bg-surface-nest-normal relative flex w-full items-center justify-center rounded-sm pb-[100%]">
              <div className="absolute inset-0 flex items-center justify-center p-4">
                <Image
                  src={gift.icon ?? ''}
                  alt={gift.name ?? ''}
                  width={100}
                  height={100}
                  className="object-cover"
                />
              </div>
            </div>
            <div className="txt-label-m text-txt-primary-normal w-full text-center">
              {gift.name} X{formatNumberToKMB(gift.getNum ?? 0)}
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}