import styles from './styles.module.css';
import React from 'react';
import CogShooterIcon from '../assets/cog-shooter.png';
import MartyMazeIcon from '../assets/marty-maze.png';
import ConfettiExplosion from '../ConfettiExplosion';
import { FiRepeat, FiArrowRightCircle } from 'react-icons/fi';

type Props = {
    keepPlaying?: () => void;
    goNext?: () => void;
};

const ShouldIStayOrShouldIGo: React.FC<Props> = ({ keepPlaying, goNext }) => {
    return (
        <div className={styles.container}>
            <ConfettiExplosion />
            <div className={styles.background}>
                <h1 className={styles.emojiTitle}>🎉 Well Done! 🎉</h1>
                {/* <div className={styles.character}>
                    <img src={MartyIcon} alt="Marty Celebrating" className={styles.mainMarty} />
                </div> */}
                <div className={styles.buttons}>
                    <div className={styles.buttonWrapper} onClick={keepPlaying}>
                        <button className={`${styles.button} ${styles.buttonPlayAgain}`} >
                            <img
                                src={CogShooterIcon}
                                alt="Keep Playing"
                                className={`${styles.buttonImage} ${styles.slalom}`}
                            />
                        </button>
                        <span className={styles.label}>
                            <FiRepeat className={styles.icon} />
                            Keep Playing
                        </span>
                    </div>

                    <div className={styles.buttonWrapper}  onClick={goNext}>
                        <button className={`${styles.button} ${styles.buttonNextLevel}`}>
                            <img
                                src={MartyMazeIcon}
                                alt="Next Level"
                                className={`${styles.buttonImage} ${styles.cross}`}
                            />
                        </button>
                        <span className={styles.label}>
                            <FiArrowRightCircle className={styles.icon} />
                            Next Level
                        </span>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default ShouldIStayOrShouldIGo;