import { AreaChart } from './AreaChart';

const sampleSeries = [
  {
    name: 'Ingresos',
    data: [31, 40, 28, 51, 42, 109, 100],
  },
  {
    name: 'Gastos',
    data: [11, 32, 45, 32, 34, 52, 41],
  },
];

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

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

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

export const SingleSeries = {
  args: {
    series: [
      {
        name: 'Ventas',
        data: [30, 40, 35, 50, 49, 60, 70, 91, 125],
      },
    ],
    categories: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep'],
    title: 'Ventas Mensuales',
  },
};

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

