import { FC, useState } from 'react'
import EmojiPicker, { EmojiClickData } from 'emoji-picker-react'
import { EmojiHappy } from 'iconsax-react'
import { useOutsideClick } from '@/hooks/useOutSideClick'

interface EmojiReactionProps {
    onEmojiSelect: (emoji: string) => void
    className?: string
}

const EmojiReaction: FC<EmojiReactionProps> = ({ onEmojiSelect, className = '' }) => {
    const [isOpen, setIsOpen] = useState(false)

    // استفاده از hook موجود برای تشخیص کلیک خارج از المان
    const containerRef = useOutsideClick(() => {
        if (isOpen) {
            setIsOpen(false)
        }
    })

    const handleEmojiClick = (emojiData: EmojiClickData) => {
        onEmojiSelect(emojiData.emoji)
        setIsOpen(false)
    }

    const togglePicker = () => {
        setIsOpen(!isOpen)
    }

    return (
        <div ref={containerRef} className={`relative ${className}`}>
            <EmojiHappy
                size={24}
                color='black'
                className='cursor-pointer hover:opacity-70 transition-opacity'
                onClick={togglePicker}
            />

            {isOpen && (
                <div className='absolute bottom-10 right-0 z-50'>
                    <div className='bg-white rounded-lg shadow-lg border border-gray-200'>
                        <EmojiPicker
                            onEmojiClick={handleEmojiClick}
                            width={300}
                            height={400}

                            searchDisabled
                            skinTonesDisabled
                            previewConfig={{
                                defaultCaption: 'یک ایموجی انتخاب کنید',
                                defaultEmoji: '1f60a'
                            }}
                        />
                    </div>
                </div>
            )}
        </div>
    )
}

export default EmojiReaction 