'use client';
import React, { FC } from 'react';
import styles from './Home.module.css';
import Image from 'next/image';
import { IConfig } from '@/api/config.api';
import ButtonMining from '@/components/ui/button-mining/ButtonMining';
import { usePlayerStore } from '@/store/player.state';
import { toFixed } from '@/utils/FormatNumber';

interface IHome {
    remainingTime: string | null;
    config: IConfig | null;
    isLoading: boolean;
    typeButton: 'pending' | 'farming' | 'claim_reward';
    handleStartFarming: () => void;
    handleClaimRewards: () => void;
}

const Home: FC<IHome> = ({
    remainingTime,
    config,
    isLoading,
    typeButton,
    handleStartFarming,
    handleClaimRewards,
}) => {
    const { player } = usePlayerStore();
    return (
        <div className={styles.home}>
            <div className={styles.main}>
                <div className={styles.greeting}>
                    <p>Привет, </p>
                    <span>{player ? player.attributes.telegram_nick : '-'}!</span>
                </div>
                <div className={styles.balance}>
                    <span>Ваш баланс</span>
                    <div className={styles.balanceAmount}>
                        <Image
                            src={'/icons/robucks-icon.svg'}
                            alt={'robucks icon'}
                            width={32}
                            height={32}
                        />
                        <span className={styles.totalBalance}>
                            {player ? toFixed(player.attributes.balance) : '0'}
                        </span>
                    </div>
                </div>
                <ButtonMining
                    isLoading={isLoading}
                    typeButton={typeButton}
                    remainingTime={remainingTime}
                    farm_amount={config?.attributes.farm_amount}
                    handleStartFarming={handleStartFarming}
                    handleClaimRewards={handleClaimRewards}
                />
            </div>
        </div>
    );
};

export default Home;