import "../../styles/styles.css";
import "./analytics.css";
import "../multiplayer/multiplayer.css";
import { PieChartComp } from "../piechart/piechart";
import { Button } from "../buttonDemo/buttonDemo"
import { Content } from "../content/content";
import { useTranslation } from "react-i18next";




export const Analytics: React.FC<any> = ({ text }) => {
    const { cardLarge, cardLarge1, cardLarge2, cardSmall, cardSmall1, cardSmall2, cardSmall3  } = text;
    const {t} = useTranslation()
    return (
        <div className="analytics__container">
            <Content text={text}></Content>
            <div data-aos="fade-up" data-aos-delay="100" className="graph__container">
                <div className="graph__row_1">
                    <div className="graph__row_item">
                        <span className="graph__title title_1">{t('cardLarge-title')}</span>
                        <div className="graph__bar_row">
                            <p className="graph__caption">{t('cardLarge-row')}</p>
                            <div className="bar__container">
                                <div className="graph__bar_width_container">
                                    <div className="graph__bar_1"></div>
                                </div>
                            </div>
                            <p className="graph__procentage">45%</p>
                        </div>
                        <div className="graph__bar_row">
                            <p className="graph__caption">{t('cardLarge-row1')}</p>
                            <div className="bar__container">
                                <div className="graph__bar_width_container">
                                    <div className="graph__bar_2"></div>
                                </div>
                            </div>
                            <p className="graph__procentage">30%</p>

                        </div>
                        <div className="graph__bar_row">
                            <p className="graph__caption">{t('cardLarge-row2')}</p>
                            <div className="bar__container">
                                <div className="graph__bar_width_container">
                                    <div className="graph__bar_3"></div>
                                </div>
                            </div>
                            <p className="graph__procentage">28%</p>

                        </div>
                        <div className="graph__bar_row">
                            <p className="graph__caption">{t('cardLarge-row3')}</p>
                            <div className="bar__container">
                                <div className="graph__bar_width_container">
                                    <div className="graph__bar_4"></div>
                                </div>
                            </div>
                            <p className="graph__procentage">5%</p>

                        </div>
                    </div>
                    <div className="graph__row_item">
                        <span className="graph__title title_2">{t('cardLarge1-title')}</span>
                        <div className="chart__container">
                            <PieChartComp />
                            <div className="legend__container">
                                <div className="legend__row">
                                    <div className="legend__point color"></div>
                                    <p className="legend__caption">{t('cardLarge1-row')}</p>
                                </div>
                                <div className="legend__row">
                                    <div className="legend__point color1"></div>
                                    <p className="legend__caption">{t('cardLarge1-row1')}</p>
                                </div>
                                <div className="legend__row">
                                    <div className="legend__point color2"></div>
                                    <p className="legend__caption">{t('cardLarge1-row2')}</p>
                                </div>
                                <div className="legend__row">
                                    <div className="legend__point color3"></div>
                                    <p className="legend__caption">{t('cardLarge1-row3')}</p>
                                </div>
                                <div className="legend__row">
                                    <div className="legend__point color4"></div>
                                    <p className="legend__caption">{t('cardLarge1-row4')}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="graph__row_item">
                        <span className="graph__title">{t('cardLarge2-title')}</span>
                        <div className="sales__container">
                            <div className="sales__row">
                                <div className="background__row">
                                    <div className="sales__bar">{t('cardLarge2-row')}</div>
                                </div>
                                <div className="sales__procentage"></div>
                            </div>
                            <div className="sales__row">
                                <div className="background__row">
                                    <div className="sales__bar sales_bar_width">{t('cardLarge2-row1')}</div>
                                </div>
                                <div className="sales__procentage">93,47%</div>
                            </div>
                            <div className="sales__row">
                                <div className="background__row">
                                    <div className="sales__bar sales_bar_width1">{t('cardLarge2-row2')}</div>
                                </div>
                                <div className="sales__procentage">45,68%</div>
                            </div>
                            <div className="sales__row">
                                <div className="background__row">
                                    <div className="sales__bar sales_bar_width3">{t('cardLarge2-row3')}</div>
                                </div>
                                <div className="sales__procentage">29,13%</div>
                            </div>

                        </div>
                    </div>
                </div>
                <div className="graph__row_2">
                    <div className=" graph__row_item_s">
                        <span className="graph__title_s">{t('cardSmall-title')}</span>
                        <div className="graph__color_elem">
                            12:45
                        </div>
                    </div>
                    <div className="graph__row_item_s">
                        <span className="graph__title_s">{t('cardSmall1-title')}</span>
                        <div className="graph__color_elem">
                            856
                        </div>
                    </div>
                    <div className=" graph__row_item_s">
                        <span className="graph__title_s">{t('cardSmall2-title')}</span>
                        <div className="graph__color_elem">
                            12,44
                        </div>
                    </div>
                    <div className="graph__row_item_s">
                        <span className="graph__title_s">{t('cardSmall3-title')}</span>
                        <div className="graph__color_elem">
                            134,5
                        </div>
                    </div>
                    <div className=" graph__row_mobile graph__row_item_l">
                        <div className="graph__text">{t(`${text}-mainBlockSubblock`)}</div>
                    </div>
                </div>
            </div>

            <div className="main-block_subblock">
                <div className="graph__text_mobile">{t(`${text}-mainBlockSubblock`)}</div>
                <Button></Button>
            </div>
        </div>

    )
}