import { Scrollbar } from '@/components/common/Scrollbar';
import { Box, Stack, Typography, styled } from '@mui/material';
import React, { useState } from 'react';

const StyledBox = styled(Box)`
    .stats-box {
        padding: 24px;
        background-color: #fff;
        border-radius: 16px;
        width: 300px;
        flex-shrink: 0;

        .title {
            color: #5d5850;
            font-size: 20px;
            font-style: normal;
            font-weight: 500;
            line-height: 24px;
            letter-spacing: 0.8px;

            margin-bottom: 16px;
        }

        .value {
            font-size: 48px;
            font-style: normal;
            font-weight: 700;
            line-height: 56px;
        }
    }
`;

type Props = {};

const Statistics = (props: Props) => {
    const [stats] = useState([
        {
            title: 'Xitoy omboridagi tovarlar',
            value: '53 542',
            color: '#3489E4',
        },
        {
            title: 'Toshkent omboridagi tovarlar',
            value: '47 865',
            color: '#FD9C2B',
        },
        {
            title: 'Mijozlar qabul qilgan tovarlar',
            value: '35 643',
            color: '#17D792',
        },
    ]);

    return (
        <StyledBox>
            <Scrollbar>
                <Stack direction={'row'} spacing={3}>
                    {stats.map((stat, index) => {
                        return (
                            <Box className='stats-box' key={index}>
                                <Typography className='title'>{stat.title}</Typography>
                                <Typography className='value' sx={{ color: stat.color }}>
                                    {stat.value}
                                </Typography>
                            </Box>
                        );
                    })}
                </Stack>
            </Scrollbar>
        </StyledBox>
    );
};

export default Statistics;
