import React from 'react';
import { render, screen } from '@testing-library/react';
import { ThemeProvider } from 'styled-components';
import { describe, it, expect } from 'vitest';
import '@testing-library/jest-dom';
import { ChartShell } from '@/features/dashboard/components/charts';
import { lightTheme } from '@/styles/theme';

describe('ChartShell', () => {
  it('renders empty state when empty=true', () => {
    render(
      <ThemeProvider theme={lightTheme}>
        <ChartShell title="Volume" empty emptyLabel="No data yet" emptyHint="Create tickets first">
          <div data-testid="chart-body" />
        </ChartShell>
      </ThemeProvider>,
    );

    expect(screen.getByText('No data yet')).toBeInTheDocument();
    expect(screen.getByText('Create tickets first')).toBeInTheDocument();
    expect(screen.queryByTestId('chart-body')).not.toBeInTheDocument();
  });

  it('renders chart children when data present', () => {
    render(
      <ThemeProvider theme={lightTheme}>
        <ChartShell title="Volume" empty={false} emptyLabel="No data">
          <div data-testid="chart-body">Chart</div>
        </ChartShell>
      </ThemeProvider>,
    );

    expect(screen.getByTestId('chart-body')).toBeInTheDocument();
    expect(screen.getByText('Volume')).toBeInTheDocument();
  });
});