import React from 'react'
import {
    Card,
    CardBody,
    CardHeader,
    Typography,
  } from "@material-tailwind/react";
  import Chart from "react-apexcharts";
   
export default function index(props) {
    const chartConfig = {
        type: "pie",
        width: 280,
        height: 280,
        series: [44, 55, 13, 43, 22],
        options: {
          chart: {
            toolbar: {
              show: false,
            },
          },
          title: {
            show: "",
          },
          dataLabels: {
            enabled: false,
          },
          colors: ["#020617", "#ff8f00", "#00897b", "#1e88e5", "#d81b60"],
          legend: {
            show: false,
          },
        },
      };
  return (

   <Card {...props}>
   <CardHeader
     floated={false}
     shadow={false}
     color="transparent"
     className="flex flex-col gap-4 rounded-none md:flex-row md:items-center"
   >
   </CardHeader>
   <CardBody className="px-2 pb-0">
   <Chart {...chartConfig} />
   </CardBody>
 </Card>
  )
}