import type { Story, Meta } from '@storybook/react';
import type { ChartTooltipProps } from './ChartTooltip';
import ChartTooltip from './ChartTooltip';

const Template: Story<ChartTooltipProps> = args => <ChartTooltip {...args} />;

export default {
  component: ChartTooltip,
  title: 'Charts/Chart Tooltip'
} as Meta;

export const Tooltip = Template.bind({});
Tooltip.args = {
  active: true,
  config: [
    {
      id: 'newyork',
      show: true,
      name: 'New York'
    },
    {
      id: 'amsterdam',
      show: true,
      name: 'Amsterdam'
    }
  ],
  payload: [
    {
      color: '#E49307',
      name: 'newyork',
      value: 6
    },
    {
      color: '#4DC9F6',
      name: 'amsterdam',
      value: 5
    }
  ],
  label: 'Active Agent Users',
  withTitleValue: true
};