import styles from '../styles/components/TwitchPopup.module.css'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faTwitch } from '@fortawesome/free-brands-svg-icons'
import { faMicrophoneAlt } from '@fortawesome/free-solid-svg-icons'
import { TwitchEmbed } from 'react-twitch-embed';

export default function TwitchPopup({ show }) {
    if(show == true) {
        return (
            <div className="card" style={{ backgroundColor: "rgba(79,79,255,1)", marginBottom: "1em" }}>
                <h1 className={styles.h1}><FontAwesomeIcon icon={faTwitch} size="1x" /> I'm currently live on Twitch! <FontAwesomeIcon icon={faMicrophoneAlt} size="1x" /></h1>
                <TwitchEmbed id="trick_the_fox" channel="trick_the_fox" theme="dark" autoplay="true" width="100%" withChat={false} />
            </div>
        )
    } else {
        return ( <span></span> )
    }
}