import { useTranslation } from 'react-i18next';
import styled from '@emotion/styled';
import { useTheme } from '@mui/material';
import { MouseEventHandler, PieTooltipProps, ResponsivePie } from '@nivo/pie';
import { formatCurrency, formatValue } from 'app/utils/numbers';
import { useLocale } from 'app/features/Localisation';

const LegendContainer = styled('div', {
  shouldForwardProp: (prop) => !['pointColor'].includes(prop),
})<{ pointColor: string }>`
  width: 250px;
  @media only screen and (max-width: 550px) {
    width: 215px;
  }
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 15px;
  border-radius: 4px;
  font-size: 14px;
  ${({ theme }) => `
    box-shadow: ${theme.shadows[3]};
    background-color: ${theme.palette.background.paper};
  `}

  div.label {
    font-weight: 700;
    padding-bottom: ${({ theme }) => theme.spacing(3)};
    ::after {
      height: 18px;
      width: 18px;
      content: ' ';
      position: absolute;
      display: inline;
      margin: auto;
      margin-left: 12px;
      border-radius: 50px;
      background-color: ${({ pointColor }) => pointColor};
      box-shadow: 0 0 0 2px rgb(230, 230, 230), 0 0 0 3px rgb(160, 160, 160);
    }
  }
  div.values {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: ${({ theme }) => theme.spacing(1)};
  }
`;

export type NivoPieChartData = {
  id: string;
  label: string;
  value?: number;
  quantity: number;
  color?: string;
};

const ChartTooltip = ({
  datum,
}: PieTooltipProps<NivoPieChartData>): JSX.Element => {
  const { t } = useTranslation(['common', 'journals']);
  const { locale } = useLocale();

  return (
    <LegendContainer pointColor={datum.color}>
      <div className="label">{datum.label}</div>

      <div className="values">
        {datum.data.value ? (
          <span>
            {t('journals:hub-view.pie-chart.tooltip.value', {
              value: t('common:display.value.currency', {
                symbol: locale.currency.symbol,
                value: formatCurrency(datum.data.value, locale.type),
              }),
            })}
          </span>
        ) : null}

        <span>
          {t('journals:hub-view.pie-chart.tooltip.quantity', {
            value: datum.data.quantity,
          })}
        </span>
      </div>
    </LegendContainer>
  );
};

export const NivoPieChart = ({
  data,
  displayValue,
  onClick,
}: {
  data: NivoPieChartData[];
  displayValue: 'value' | 'quantity';
  onClick: MouseEventHandler<NivoPieChartData, SVGPathElement>;
}): JSX.Element => {
  const theme = useTheme();
  const { locale } = useLocale();
  const { t } = useTranslation(['common', 'journals']);

  return (
    <ResponsivePie
      activeOuterRadiusOffset={8}
      arcLinkLabel={({ label, value }) =>
        `${label} (${
          displayValue === 'value'
            ? t('common:display.value.currency', {
                symbol: locale.currency.symbol,
                value: formatCurrency(value, locale.type),
              })
            : formatValue(value, locale.type)
        })`
      }
      value={displayValue}
      arcLinkLabelsColor={{ from: 'color' }}
      arcLinkLabelsDiagonalLength={6}
      arcLinkLabelsOffset={6}
      arcLinkLabelsSkipAngle={13}
      arcLinkLabelsStraightLength={6}
      arcLinkLabelsTextColor={{ theme: 'labels.text.fill' }}
      arcLinkLabelsThickness={2}
      colors={{ scheme: 'category10' }}
      cornerRadius={10}
      data={data}
      enableArcLabels={false}
      innerRadius={0.25}
      margin={{ top: 25, right: 50, bottom: 50, left: 50 }}
      padAngle={2}
      sortByValue
      theme={theme.nivo}
      tooltip={ChartTooltip}
      onClick={onClick}
    />
  );
};

Could you give me some tips on how to improve my code structure and please give me information about my code and not another example