import type { Meta, StoryObj } from '@storybook/react';
import { AssistantChart } from './AssistantChart';
import React from 'react';

const meta: Meta<typeof AssistantChart> = {
  title: 'UI/AssistantChart',
  component: AssistantChart,
  render: args => <AssistantChart {...args} />,
};

export default meta;
type Story = StoryObj<typeof AssistantChart>;

const chartData = [
  { month: 'January', desktop: 186, mobile: 80 },
  { month: 'February', desktop: 305, mobile: 200 },
  { month: 'March', desktop: 237, mobile: 120 },
  { month: 'April', desktop: 73, mobile: 190 },
  { month: 'May', desktop: 209, mobile: 130 },
  { month: 'June', desktop: 214, mobile: 140 },
];

const chartConfig = {
  desktop: {
    label: 'Desktop',
    color: 'hsl(var(--primary))',
  },
  mobile: {
    label: 'Mobile',
    color: 'hsl(var(--destructive))',
  },
};

export const Default: Story = {
  args: {
    data: chartData,
    config: chartConfig,
  },
  render: args => (
    <div className="w-[500px]">
      <AssistantChart {...args} />
    </div>
  ),
};