import * as React from 'react';
import { Pie, PieChart, ResponsiveContainer, Tooltip } from 'recharts';
import { Card, CardHeader } from "@mui/material";
import { useTranslate } from "react-admin";


const NbPie = ({ deadStock, locUsage }) => {
    const translate = useTranslate();
    console.log(locUsage);

    return (
        <>
            <Card sx={{
                width: '100%',
                maxWidth: 598,
                maxHeight: 570,
                marginTop: 1,
                flexDirection: 'column',
                flex: '1',
                '& a': {
                    textDecoration: 'none',
                    color: 'inherit',
                },
            }}>
                <CardHeader title={translate('page.dashboard.header.stockUsage')} />
                <ResponsiveContainer width="100%" height="100%">
                    <PieChart width={400} height={400}>
                        <Pie
                            dataKey="value"
                            isAnimationActive={false}
                            data={locUsage}
                            cx="50%"
                            cy="40%"
                            outerRadius={80}
                            fill="#8884d8"
                            label
                        />
                        <Tooltip />
                    </PieChart>
                </ResponsiveContainer>
            </Card>
        </>
    );
}

export default NbPie;