import { useEffect } from 'react';
import { useStatisticStore } from '../store/statistic';
import { Typography, Box, Card, CardContent } from '@mui/material';
import { BarChart } from 'lucide-react';

export const Statistic = () => {
  const { statistic, getStatistic } = useStatisticStore();
  useEffect(() => {
    getStatistic();
  }, []);
  return (
    <Box sx={{ padding: 2, backgroundColor: 'white', borderRadius: 2, marginTop: 4, boxShadow: '0 0 10px 0 rgba(0, 0, 0, 0.1)' }}>
      <div className='flex items-center gap-3 mb-8'>
        <BarChart className='w-8 h-8 text-amber-600' />
        <Typography
          variant='h1'
          className='text-amber-900'
          sx={{
            fontSize: { xs: '1.3rem', sm: '2rem' },
            fontWeight: 'bold',
          }}>
          Statistic
        </Typography>
      </div>
      <Card>
        <CardContent>
          <div>allFileSize: {parseFloat(statistic.sizeMb + '').toFixed(2)} MB</div>
        </CardContent>
      </Card>
    </Box>
  );
};
