import {Chip, Divider, Grid, Paper} from "@mui/material";
import PolarChart from "./PolarChart";
import Pie from "./PieChart";

const fakeData = [
    {name: "آذربایجان شرقی", data: 0},
    {name: "آذربایجان غربی", data: 33},
    {name: "اردبیل", data: 90},
    {name: "اصفهان", data: 30},
    {name: "البرز", data: 70},
    {name: "ایلام", data: 32},
    {name: "بوشهر", data: 12},
    {name: "تهران", data: 44},
    {name: "چهارمحال و بختیاری", data: 95},
    {name: "خراسان جنوبی", data: 30},
    {name: "خراسان رضوی", data: 70},
    {name: "خراسان شمالی", data: 10},
    {name: "خوزستان", data: 28},
    {name: "زنجان", data: 85},
    {name: "سمنان", data: 30},
    {name: "سیستان و بلوچستان", data: 70},
    {name: "فارس", data: 10},
    {name: "قزوین", data: 12},
    {name: "قم", data: 40},
    {name: "کردستان", data: 85},
    {name: "کرمان", data: 30},
    {name: "کرمانشاه", data: 67},
    {name: "کهگیلویه و بویراحمد", data: 100},
    {name: "گلستان", data: 97},
    {name: "گیلان", data: 5},
    {name: "لرستان", data: 27},
    {name: "مازندران", data: 31},
    {name: "مرکزی", data: 37},
    {name: "هرمزگان", data: 46},
    {name: "همدان", data: 52},
    {name: "یزد", data: 60}
];

const LoanDistribution = (props) => {
    return (
        <Paper elevation={2} sx={{width: "95%", mx: "auto", my: 2, py: 2, background: "#f7f7f7e6"}}>
            <Divider variant="middle" textAlign="center">
                <Chip variant="outlined" label="درصد توضیع وام ها در هر مرحله" sx={{color: "#7e7e7e"}}/>
            </Divider>
            <Grid container spacing={2} sx={{justifyContent: "space-between"}}>
                <Grid item xs={5} sx={{height: "300px"}}>
                    <PolarChart data={fakeData}/>
                </Grid>
                <Grid item xs={5} sx={{height: "300px"}}>
                    <Pie data={fakeData}/>
                </Grid>
            </Grid>
        </Paper>
    )
};

export default LoanDistribution;