import React, { useMemo } from "react";
import { DemographicsTextCard } from "@local-logic/core/ui";
import useTranslator from "~/hooks/useTranslator";
import { translations as demographicsTranslations } from "~/localization/translation-packs/demographics";
import { EmploymentStatusCardProps } from "./types";

export const EmploymentStatusCard: React.FC<EmploymentStatusCardProps> = ({
  options: { datasets },
}) => {
  const { translations } = useTranslator([demographicsTranslations]);

  const chartOptions = useMemo(
    () => ({
      options: {
        title: translations.employmentStatusTitle,
        values: datasets.map((item) => ({
          variable: item.label.replace(" ", "_"),
          label: item.label,
          value: `${item.data}%`,
        })),
      },
    }),
    [datasets]
  );

  return <DemographicsTextCard {...chartOptions} />;
};