'use client';
import { FC, useState } from 'react';
import styles from '@/components/tasks/Tasks.module.css';
import Image from 'next/image';

interface ITaskContent {
    taskId: number;
    link: string;
    status: string | undefined;
    prize: number;
    handleClaimPrize: (taskId: number, prize: number) => Promise<void>;
}

const TaskContent: FC<ITaskContent> = ({ taskId, status, prize, handleClaimPrize }) => {
    const [isClaiming, setIsClaiming] = useState(false);

    const onClaim = () => {
        setIsClaiming(true);
        handleClaimPrize(taskId, prize).catch(err => {
            console.error(err);
            setIsClaiming(false);
        });
    };
    if (status) {
        if (status === 'pending_prize') {
            return (
                <>
                    <button className={styles.claimPrize} onClick={onClaim} disabled={isClaiming}>
                        {`Получить +${prize}`}
                        <Image
                            src={'/icons/small-robucks-icon.svg'}
                            alt={'small coin icon'}
                            width={18}
                            height={18}
                        />
                    </button>
                </>
            );
        } else if (status === 'claimed') {
            return (
                <div className={styles.claimedPrize}>
                    <span>Выполнено</span>
                </div>
            );
        }
    } else {
        return (
            <div className={styles.taskPrize}>
                <span>+ {prize}</span>
                <Image
                    src={'/icons/small-robucks-icon.svg'}
                    alt={'small coin icon'}
                    width={18}
                    height={18}
                />
            </div>
        );
    }
};

export default TaskContent;