import "../../styles/styles.css";
import "../multiplayer/multiplayer.css";
import "./player.css"
import { Button } from "../buttonDemo/buttonDemo"
import { Content } from "../content/content";
import ReactPlayer from 'react-player'
import { useState } from "react";



export const Player: React.FC<any> = ({ text }) => {
  const [captionSmall, setCaptionSmall] = useState(true);

  return (
    <div data-aos="zoom-in" data-aos-duration="500" className="player__container">
      <Content captionSmall={captionSmall} text={text}></Content>
      <div className="video__container">
        <ReactPlayer width={'100%'} height={'100%'} controls={true} url='https://www.youtube.com/watch?v=eDanRHahbGY&ab_channel=GRAFFtech' />
      </div>
      <div className="main-block__subblock-container">
        <div className={captionSmall ? " main-block__caption_small main-block_subblock " : 'main-block_subblock'}>
          {text.mainBlockSubblock}
          <Button text={text}></Button>
        </div>
      </div>
    </div>
  );
};
