import Image from 'next/image'
import styles from './style.module.css'
import Toast from '@/components/Toast'
import { showCaseSubmission } from '@/pages/api/base'
import { useTranslation } from 'react-i18next'

interface Iporps {
    id?: string
    setSubmitted: (value: boolean) => void
    isSubmitted?: boolean
    mouseChange?: (hover: boolean) => void
}

const StarToTask = ({ id, setSubmitted, isSubmitted, mouseChange }: Iporps) => {
    const { t } = useTranslation('studio')

    // 投稿
    const contribute = async () => {
        if (isSubmitted) return
        const value = await showCaseSubmission({ id: id ?? '' })
        if (value) {
            setSubmitted(true)
            Toast({
                message: t('toast.submissionSuccess'),
                duration: 3000,
                type: 'success',
            })
        }
    }

    return (
        <div
            className={`ag14 ${styles.contribute} ${isSubmitted ? styles.contributeDefault : null}`}
            onClick={() => {
                contribute()
            }}
            onMouseEnter={() => {
                if (mouseChange) {
                    mouseChange(true)
                }
            }}
            onMouseLeave={() => {
                if (mouseChange) {
                    mouseChange(false)
                }
            }}
        >
            <Image
                src={isSubmitted ? '/send_active.svg' : '/send.svg'}
                width={20}
                height={20}
                alt="share"
                className={styles.taskIcon}
            ></Image>
            <span>{isSubmitted ? t('submitted') : t('submission')}</span>
        </div>
    )
}

export default StarToTask
