import { render, screen } from '@testing-library/react';
import { describe, it, expect, vi } from 'vitest';
import { AssistantChart } from './AssistantChart';
import React from 'react';

// Mock recharts
vi.mock('recharts', async () => {
  const actual = await vi.importActual('recharts');
  return {
    ...actual,
    ResponsiveContainer: ({ children }: { children: React.ReactNode }) => (
      <div data-testid="responsive-container">{children}</div>
    ),
  };
});

// Mock the chart components
vi.mock('../chart', () => ({
  ChartContainer: ({ children, className }: any) => (
    <div className={className} data-testid="chart-container">
      {children}
    </div>
  ),
  ChartTooltip: () => <div />,
  ChartTooltipContent: () => <div />,
  ChartLegend: () => <div />,
  ChartLegendContent: () => <div />,
  ChartStyle: () => <div />,
}));

describe('AssistantChart', () => {
  const data = [
    { month: 'January', desktop: 186, mobile: 80 },
    { month: 'February', desktop: 305, mobile: 200 },
  ];

  const config = {
    desktop: { label: 'Desktop', color: 'hsl(var(--chart-1))' },
    mobile: { label: 'Mobile', color: 'hsl(var(--chart-2))' },
  };

  it('renders correctly', () => {
    render(<AssistantChart data={data} config={config} />);
    expect(screen.getByTestId('chart-container')).toBeInTheDocument();
  });
});