import React from "react";
import {HStack, Stack, Text,} from "@chakra-ui/react";
import Header from "./Header";
import {CustomPieChart} from "./CustomComponents";

const Analytics = () => {
    return (
        <Stack
            minW="1285px"
            alignItems={"center"}
            pb="40px"
            bg="rgba(247, 248, 252, 1)"
        >
            <Header title="{Content Name}"/>
            <Stack w="100%" spacing={"80px"} pt="48px" maxWidth={"1000px"} pb="80px">
                <Stack spacing={"16px"}>
                    <Text
                        color="#252733"
                        fontFamily="MaisonBold"
                        fontSize="19px"
                        fontStyle="normal"
                        fontWeight="700"
                        lineHeight="23.05px"
                        letterSpacing="0.40000001192092896px"
                    >
                        Rating by user age
                    </Text>
                    <Text
                        w="498px"
                        color="rgba(37, 39, 51, 0.4)"
                        fontFamily="MaisonBook"
                        fontSize="14px"
                        fontStyle="normal"
                        fontWeight="400"
                        lineHeight="20px"
                        letterSpacing="0.20000001192092896px"
                    >
                        Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
                        vestibulum. Curabitur blandit tempus porttitor.
                    </Text>

                    <HStack justifyContent="space-between">
                        <CustomPieChart
                            title="18-24"
                            data={[
                                ["Task", "Hours per Day"],
                                ["Work", 20],
                                ["Eat", 3],
                                ["Commute", 4],
                                ["Watch TV", 1],
                                ["Sleep", 6],
                            ]}
                        />
                        <CustomPieChart
                            title="30-35"
                            data={[
                                ["Task", "Hours per Day"],
                                ["Work", 11],
                                ["Eat", 3],
                                ["Commute", 2],
                                ["Watch TV", 3],
                                ["Sleep", 7],
                            ]}
                        />
                        <CustomPieChart
                            title="40-55"
                            data={[
                                ["Task", "Hours per Day"],
                                ["Work", 11],
                                ["Watch TV", 2],
                                ["Sleep", 7],
                            ]}
                        />
                        <CustomPieChart
                            title="60-70"
                            data={[
                                ["Task", "Hours per Day"],
                                ["Work", 11],
                                ["Eat", 5],

                                ["Sleep", 9],
                            ]}
                        />
                    </HStack>
                </Stack>

                <Stack spacing={"16px"}>
                    <Text
                        color="#252733"
                        fontFamily="MaisonBold"
                        fontSize="19px"
                        fontStyle="normal"
                        fontWeight="700"
                        lineHeight="23.05px"
                        letterSpacing="0.40000001192092896px"
                    >
                        Rating by user gender
                    </Text>
                    <Text
                        w="498px"
                        color="rgba(37, 39, 51, 0.4)"
                        fontFamily="MaisonBook"
                        fontSize="14px"
                        fontStyle="normal"
                        fontWeight="400"
                        lineHeight="20px"
                        letterSpacing="0.20000001192092896px"
                    >
                        Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
                        vestibulum. Curabitur blandit tempus porttitor.
                    </Text>

                    <HStack>
                        <CustomPieChart
                            title="18-24"
                            data={[
                                ["Task", "Hours per Day"],
                                ["Work", 15],
                                ["Eat", 6],
                                ["Commute", 7],
                                ["Watch TV", 1],
                                ["Sleep", 10],
                            ]}
                        />
                        <CustomPieChart
                            title="30-35"
                            data={[
                                ["Task", "Hours per Day"],
                                ["Work", 11],
                                ["Eat", 2],
                                ["Commute", 2],
                                ["Watch TV", 2],
                                ["Sleep", 7],
                            ]}
                        />
                    </HStack>
                </Stack>
            </Stack>
        </Stack>
    );
};

export default Analytics;