import { LineChart } from './LineChart';

const sampleSeries = [
  {
    name: 'Ventas',
    data: [30, 40, 35, 50, 49, 60, 70, 91, 125],
  },
  {
    name: 'Ingresos',
    data: [20, 30, 25, 40, 39, 50, 60, 81, 105],
  },
];

const sampleCategories = ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep'];

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

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

export const WithoutTitle = {
  args: {
    series: sampleSeries,
    categories: sampleCategories,
  },
};

export const SingleSeries = {
  args: {
    series: [
      {
        name: 'Usuarios',
        data: [100, 120, 140, 160, 180, 200, 220],
      },
    ],
    categories: ['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb', 'Dom'],
    title: 'Usuarios Activos por Día',
  },
};

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

export const WithoutLegend = {
  args: {
    series: sampleSeries,
    categories: sampleCategories,
    title: 'Sin Leyenda',
    showLegend: false,
  },
};

