'use client'

import { cn } from '@/lib/utils'
import { ReactNode } from 'react'

interface ChatBubbleProps {
  children: ReactNode
  className?: string
  isDefault?: boolean
  img?: string
}

const ChatBubble = ({ children, isDefault, img, className }: ChatBubbleProps) => {
  return (
    <div className="relative max-w-[496px] p-4">
      <div
        className={cn(
          isDefault && ['bg-primary-normal absolute inset-0 rounded-lg backdrop-blur-[32px]'],
          !isDefault && [
            'absolute -inset-2',
            'border-[30px] border-transparent',
            '[border-image-slice:70_fill]',
            '[border-image-width:30px]',
            '[border-image-repeat:stretch]',
          ],
          className
        )}
        style={{
          borderImageSource: isDefault ? 'none' : `url(${img || ''})`,
          // borderImageSource: isDefault ? 'none' : `url(https://hhb.crushlevel.ai/static/chatBubble/chat_bubble_temp_1.png)`,
        }}
      ></div>
      <div className="relative min-w-[20px] text-left">{children}</div>
    </div>
  )
}

export default ChatBubble
