import { describe, test, expect } from 'vitest'
import { render, screen } from '@testing-library/react'
import { WidgetSubHeader } from './subheader'

describe('WidgetSubHeader', () => {
  test('renders empty right slot by default', () => {
    const { container } = render(<WidgetSubHeader />)
    expect(container.firstChild).toBeTruthy()
  })

  test('renders slotLeft content', () => {
    render(<WidgetSubHeader slotLeft={<span>Left Content</span>} />)
    expect(screen.getByText('Left Content')).toBeTruthy()
  })

  test('renders slotRight content', () => {
    render(<WidgetSubHeader slotRight={<span>Right Content</span>} />)
    expect(screen.getByText('Right Content')).toBeTruthy()
  })

  test('renders both slots when provided', () => {
    render(
      <WidgetSubHeader
        slotLeft={<span>Left</span>}
        slotRight={<span>Right</span>}
      />,
    )
    expect(screen.getByText('Left')).toBeTruthy()
    expect(screen.getByText('Right')).toBeTruthy()
  })

  test('right slot takes full width when left is empty (flex layout)', () => {
    const { container } = render(<WidgetSubHeader />)
    // The right slot should have flexGrow: 1 for full width behavior
    const rightSlot = container.querySelector('[class*="MuiBox-root"]')
    expect(rightSlot).toBeTruthy()
  })

  test('renders with custom sx prop', () => {
    const { container } = render(
      <WidgetSubHeader sx={{ backgroundColor: 'red' }} />,
    )
    expect(container.firstChild).toBeTruthy()
  })
})