import {Grid, Paper} from "@mui/material";
import {useTranslations} from "next-intl";
import RadialBarSemiCircularChart from "@/components/dashboard/old-reports/LoanDetails/RadialBarSemiCircularChart";
import RadialBarStrokedChart from "@/components/dashboard/old-reports/LoanDetails/RadialBarStrokedChart";


const LoanDetails = () => {
    const t = useTranslations();
    return (
        <Paper elevation={2} sx={{width: "95%", mx: "auto", my: 2, pb: 2, background: "#f7f7f7e6"}}>
            {/*<Filter title={t("reports.loan_details")}*/}
            {/*        filterItem={[*/}
            {/*            {type: "province", type_fa: "استان", multiple: false},*/}
            {/*            {type: "year", type_fa: "سال", multiple: false}*/}
            {/*        ]}*/}
            {/*        setFilterOption={setFilterOption}*/}
            {/*        isLoadingReportList={isLoadingReportList}*/}
            {/*/>*/}
            <Grid container sx={{justifyContent: {xs: "center", md: "space-between"}}}>
                <Grid item xs={12} sm={10} md={5} sx={{aspectRatio: "1/0.75"}}>
                    <RadialBarSemiCircularChart data={20} label={t("reports.cost_of_loan_refer_to_bank")}/>
                </Grid>
                <Grid item xs={12} sm={10} md={5} sx={{aspectRatio: "1/0.75"}}>
                    <RadialBarSemiCircularChart data={60} label={t("reports.number_of_loan_refer_to_bank")}/>
                </Grid>
                <Grid item xs={12} sm={10} md={5} sx={{aspectRatio: "1/0.75"}}>
                    <RadialBarSemiCircularChart data={95} label={t("reports.cost_of_payed_loan")}/>
                </Grid>
                <Grid item xs={12} sm={10} md={5} sx={{aspectRatio: "1/0.75"}}>
                    <RadialBarStrokedChart data={15} label={t("reports.number_of_payed_loan")}/>
                </Grid>
            </Grid>
        </Paper>
    )
};

export default LoanDetails;