'use client';

import { FC } from 'react';
import styles from '@/components/home/Home.module.css';
import Image from 'next/image';

interface IButtonMining {
    isLoading: boolean;
    typeButton: 'pending' | 'farming' | 'claim_reward';
    remainingTime: string | null;
    farm_amount: number | undefined;
    handleStartFarming: () => void;
    handleClaimRewards: () => void;
}

const ButtonMining: FC<IButtonMining> = ({
    isLoading,
    typeButton,
    remainingTime,
    farm_amount,
    handleStartFarming,
    handleClaimRewards,
}) => {
    if (typeButton === 'pending') {
        return (
            <>
                <button
                    className={
                        isLoading
                            ? `${styles.disabledButton} ${styles.miningButton}`
                            : `${styles.miningButton}`
                    }
                    disabled={isLoading}
                    onClick={handleStartFarming}
                >
                    Начать добычу
                </button>
            </>
        );
    }
    if (typeButton === 'farming' && remainingTime) {
        return (
            <>
                <button
                    className={
                        isLoading
                            ? `${styles.disabledButton} ${styles.farmingButton}`
                            : `${styles.farmingButton}`
                    }
                >{`Собрать добычу через ${remainingTime}`}</button>
            </>
        );
    }
    if (typeButton === 'claim_reward') {
        return (
            <>
                <button
                    className={
                        isLoading
                            ? `${styles.disabledButton} ${styles.claimReward}`
                            : `${styles.claimReward}`
                    }
                    onClick={handleClaimRewards}
                >
                    <div className={styles.reward}>
                        <span>Собрать добычу </span>
                        <div className={styles.claimAmount}>
                            <span>+</span>
                            <Image
                                src={'/icons/small-robucks-icon.svg'}
                                alt={'small robucks'}
                                width={18}
                                height={18}
                            />
                            <span>{farm_amount}</span>
                        </div>
                    </div>
                </button>
            </>
        );
    }
};

export default ButtonMining;