import "../../styles/styles.css";
import "./multiplayer.css";
import photo from "./Photo.png";
import photo1 from "./Photo1.png";
import photo2 from "./Photo2.png";
import photo3 from "./Photo3.png";
import { Button } from "../buttonDemo/buttonDemo"
import { Content } from "../content/content";
import { useState } from "react";
import { useTranslation } from "react-i18next";

export const Multiplayer: React.FC<any> = ({text}) => {
  const [captionSmall, setCaptionSmall] = useState(true);
  const {t} = useTranslation()
  return (
    <div
      data-aos="zoom-in"
      data-aos-duration="400"
      className="multiplayer__container"
    >
      <Content isColor={false} captionSmall={captionSmall} text={text}></Content>
      <div className="multiplayer__photo-container">
        <img alt="device" src={photo1} className="multiplayer__image" />
        <img alt="device" src={photo} className="multiplayer__image" />
        <img alt="device" src={photo2} className="multiplayer__image" />
        <img alt="device" src={photo3} className="multiplayer__image" />
      </div>
      <div className="main-block__subblock-container">
        <div className={captionSmall ? " main-block__caption_small main-block_subblock " : 'main-block_subblock'}>
          {t(`${text}-mainBlockSubblock`)}
          <Button text={text}></Button>
        </div>
      </div>
    </div>
  );
};