import { SmsNotification } from 'iconsax-react'
import { FC, useState } from 'react'
import { useMarkAsRead, useMarkAsUnread } from '../hooks/useEmailData'
import { useParams } from 'react-router-dom'

const MessageUnread: FC = () => {

    const [isRead, setIsRead] = useState<boolean>(true)
    const { id, mailbox } = useParams<{ id: string, mailbox: string }>()
    const { mutate: markAsRead } = useMarkAsRead()
    const { mutate: markAsUnread } = useMarkAsUnread()

    return (
        <SmsNotification onClick={() => {
            if (isRead) {
                markAsUnread({ messageId: id || '', mailbox: mailbox || '' })
            } else {
                markAsRead({ messageId: id || '', mailbox: mailbox || '' })
            }
            setIsRead(!isRead)
        }} size={18} variant={isRead ? 'Outline' : 'Bold'} color='black' />
    )
}

export default MessageUnread