import { ColumnChart } from './ColumnChart';

const sampleSeries = [
  {
    name: 'Ventas',
    data: [44, 55, 41, 67, 22, 43, 21],
  },
  {
    name: 'Gastos',
    data: [13, 23, 20, 8, 13, 27, 33],
  },
];

const sampleCategories = ['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb', 'Dom'];

export default {
  title: 'DataDisplay/ColumnChart',
  component: ColumnChart,
  tags: ['autodocs'],
};

export const Default = {
  args: {
    series: sampleSeries,
    categories: sampleCategories,
    title: 'Gráfico de Columnas',
  },
};

export const SingleSeries = {
  args: {
    series: [
      {
        name: 'Usuarios',
        data: [400, 430, 448, 470, 540, 580, 690],
      },
    ],
    categories: sampleCategories,
    title: 'Usuarios por Día',
  },
};

export const CustomColors = {
  args: {
    series: sampleSeries,
    categories: sampleCategories,
    title: 'Gráfico con Colores Personalizados',
    colors: ['#8B5CF6', '#F59E0B'],
  },
};

export const WithoutLegend = {
  args: {
    series: [
      {
        name: 'Ventas',
        data: [44, 55, 41, 67, 22, 43, 21],
      },
    ],
    categories: sampleCategories,
    title: 'Sin Leyenda',
    showLegend: false,
  },
};

