'use client'

import { ExtendedMessage } from '@/atoms/im'
import Image from 'next/image'
import ChatUserTextContainer from '../ChatUserTextContainer'

const SendGiftItem = ({
  message,
  customData,
}: {
  message: ExtendedMessage
  customData: {
    giftId: number
    giftName: string
    giftNum: number
    type: string
    title: string
    giftIcon: string
  }
}) => {
  const { giftName, giftNum, giftIcon } = customData || {}

  return (
    <>
      <ChatUserTextContainer message={message} />
      <div className="flex justify-end pb-8">
        <div className="bg-surface-element-normal flex w-[366px] items-center gap-2 rounded-lg px-4 py-3 backdrop-blur-2xl">
          <div className="bg-surface-nest-normal rounded-sm p-2">
            <Image
              src={giftIcon || ''}
              alt={giftName}
              width={40}
              height={40}
              className="object-cover"
            />
          </div>
          <div className="flex items-center gap-1">
            <div className="txt-label-l">{`${giftName}`}</div>
            <div className="txt-numMonotype-m">{`x${giftNum}`}</div>
          </div>
        </div>
      </div>
    </>
  )
}

export default SendGiftItem
