'use client'

import { FaAt } from 'react-icons/fa'

interface MentionButtonProps {
    unreadCount: number
    mode: 'desktop' | 'mobile'
    onScrollToMention: () => void
    t: (key: string) => string
}

export default function MentionButton({
    unreadCount,
    mode,
    onScrollToMention,
    t,
}: MentionButtonProps) {
    if (unreadCount === 0) return null

    return (
        <button
            type="button"
            onClick={onScrollToMention}
            className="absolute bottom-4 right-4 w-12 h-12 rounded-full bg-yellow-500 hover:bg-yellow-600 dark:bg-yellow-600 dark:hover:bg-yellow-700 text-white shadow-lg flex items-center justify-center transition-all z-[100]"
            aria-label={t('room.mention.scrollToMention')}
        >
            <FaAt className="w-6 h-6" />
            {unreadCount > 1 && (
                <span className="absolute -top-1 -right-1 w-5 h-5 rounded-full bg-red-500 text-white text-xs flex items-center justify-center">
                    {unreadCount > 9 ? '9+' : unreadCount}
                </span>
            )}
        </button>
    )
}