import { describe, it, expect } from 'vitest'
import { render } from '@testing-library/react'
import { ThemedChart } from './ThemedChart'
import { Line } from 'recharts'

// Recharts uses ResizeObserver internally
class ResizeObserverMock {
  observe() {}
  unobserve() {}
  disconnect() {}
}
globalThis.ResizeObserver = ResizeObserverMock as any

describe('ThemedChart', () => {
  it('renders nothing when data is empty', () => {
    const { container } = render(
      <ThemedChart data={[]}>
        <Line dataKey="value" />
      </ThemedChart>,
    )
    expect(container.innerHTML).toBe('')
  })

  it('renders a chart container when data is provided', () => {
    const data = [
      { time: '10:00', value: 10 },
      { time: '10:01', value: 20 },
    ]
    const { container } = render(
      <ThemedChart data={data} height={160}>
        <Line dataKey="value" />
      </ThemedChart>,
    )
    expect(container.querySelector('.recharts-responsive-container')).toBeTruthy()
  })

  it('applies custom className', () => {
    const data = [{ time: '10:00', value: 5 }]
    const { container } = render(
      <ThemedChart data={data} className="my-chart">
        <Line dataKey="value" />
      </ThemedChart>,
    )
    expect(container.querySelector('.my-chart')).toBeTruthy()
  })
})
