Chart

'use client';
import { useEffect, useRef, useState } from 'react';
import {
  ChartLegendSection,
  ChartLegend,
  ChartTooltip,
  ChartTooltipItem,
  type ChartLegendState,
} from '@mbsw/ui';

export default function Demo() {
  const settings = {
    "state": "default"
  };
  const [state, setState] = useState(settings.state as ChartLegendState);
  const previousSetting = useRef(settings.state);
  useEffect(() => {
    if (previousSetting.current === settings.state) return;
    previousSetting.current = settings.state;
    setState(settings.state as ChartLegendState);
  }, [settings.state]);
  return (
    <>
      <ChartLegendSection aria-label={"Chart legend"}>
        <ChartLegend
          label="A"
          value="1,240"
          state={state}
          seriesColor="#5283dc"
          onClick={() => {
            const next = state === 'selected' ? 'default' : 'selected';
            setState(next);
          }}
        />
        <ChartLegend label="B" value="320" seriesColor="#8b6fc0" />
      </ChartLegendSection>
      <ChartTooltip date={"September 2026"}>
        <ChartTooltipItem label="A" value="1,240" seriesColor="#5283dc" />
        <ChartTooltipItem label="B" value="320" seriesColor="#8b6fc0" />
      </ChartTooltip>
    </>
  );
}