import React from "react";
import { useTranslation } from "react-i18next";
import CardTemplate from "./job-detail-cards.template.component";
import { Pie } from "@nivo/pie";
export default function JobDetailCardsPartsComponent({ loading, data }) {
  const { t } = useTranslation();

  const commonProperties = {
    width: 225,
    height: 225,
    margin: { top: 20, right: 30, bottom: 20, left: 30 },
    animate: true
  };

  const cdata = [
    {
      id: "elixir",
      label: "elixir",
      value: 558,
      color: "hsl(21, 70%, 50%)"
    },
    {
      id: "erlang",
      label: "erlang",
      value: 443,
      color: "hsl(91, 70%, 50%)"
    },
    {
      id: "css",
      label: "css",
      value: 161,
      color: "hsl(271, 70%, 50%)"
    },
    {
      id: "python",
      label: "python",
      value: 305,
      color: "hsl(33, 70%, 50%)"
    },
    {
      id: "php",
      label: "php",
      value: 360,
      color: "hsl(296, 70%, 50%)"
    }
  ];

  return (
    <div>
      <CardTemplate loading={loading} title={t("jobs.labels.cards.parts")}>
        <Pie
          {...commonProperties}
          data={cdata}
          innerRadius={0.5}
          padAngle={2}
          cornerRadius={5}
          enableRadialLabels={false}
        />
      </CardTemplate>
    </div>
  );
}
