import { Box } from '@mui/material';
import { colorPalette } from '@src/theme/hugo/colors';
import { type Meta, type StoryObj } from '@storybook/react-vite';

import DonutChart from '.';

const meta: Meta<typeof DonutChart> = {
  component: DonutChart,
  title: 'Design System/Charts/DonutChart',
  tags: ['autodocs'],
  argTypes: {
    data: { control: false },
    options: { control: false },
    plugins: { control: false },
  },
};

export default meta;

type Story = StoryObj<typeof DonutChart>;

export const Default: Story = {
  args: {
    data: {
      labels: ['Example A', 'Example B'],
      datasets: [
        {
          data: [44, 55],
          backgroundColor: [
            colorPalette.base.blueBrand[200],
            colorPalette.base.blueBrand[400],
          ],
        },
      ],
    },
    options: {
      plugins: {
        datalabels: { display: false },
      },
    },
  },
  decorators: Story => (
    <Box
      width={300}
      height={300}
    >
      <Story />
    </Box>
  ),
};