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";




export const Analytics: React.FC<any> = ({ text }) => {
    const { cardLarge, cardLarge1, cardLarge2, cardSmall, cardSmall1, cardSmall2, cardSmall3  } = text;
    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">{cardLarge.title}</span>
                        <div className="graph__bar_row">
                            <p className="graph__caption">{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">{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">{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">{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">{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">{cardLarge1.row}</p>
                                </div>
                                <div className="legend__row">
                                    <div className="legend__point color1"></div>
                                    <p className="legend__caption">{cardLarge1.row1}</p>
                                </div>
                                <div className="legend__row">
                                    <div className="legend__point color2"></div>
                                    <p className="legend__caption">{cardLarge1.row2}</p>
                                </div>
                                <div className="legend__row">
                                    <div className="legend__point color3"></div>
                                    <p className="legend__caption">{cardLarge1.row3}</p>
                                </div>
                                <div className="legend__row">
                                    <div className="legend__point color4"></div>
                                    <p className="legend__caption">{cardLarge1.row4}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="graph__row_item">
                        <span className="graph__title">{cardLarge2.title}</span>
                        <div className="sales__container">
                            <div className="sales__row">
                                <div className="background__row">
                                    <div className="sales__bar">{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">{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">{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">{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">{cardSmall.title}</span>
                        <div className="graph__color_elem">
                            12:45
                        </div>
                    </div>
                    <div className="graph__row_item_s">
                        <span className="graph__title_s">{cardSmall1.title}</span>
                        <div className="graph__color_elem">
                            856
                        </div>
                    </div>
                    <div className=" graph__row_item_s">
                        <span className="graph__title_s">{cardSmall2.title}</span>
                        <div className="graph__color_elem">
                            12,44
                        </div>
                    </div>
                    <div className="graph__row_item_s">
                        <span className="graph__title_s">{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">{text.mainBlockSubblock}</div>
                    </div>
                </div>
            </div>

            <div className="main-block_subblock">
                <div className="graph__text_mobile">{text.mainBlockSubblock}</div>
                <Button text={text}></Button>
            </div>
        </div>

    )
}