import { render, screen } from '@testing-library/react'
import { CommandGroup } from '../CommandGroup'

describe('CommandGroup', () => {
  describe('label', () => {
    it('renders the provided label text', () => {
      render(<CommandGroup label="Navigation"><div /></CommandGroup>)
      expect(screen.getByText('Navigation')).toBeInTheDocument()
    })

    it('renders label in uppercase via CSS class', () => {
      render(<CommandGroup label="Actions"><div /></CommandGroup>)
      const label = screen.getByText('Actions')
      expect(label.className).toMatch(/uppercase/)
    })

    it('applies text-xs styling to the label', () => {
      render(<CommandGroup label="Recent"><div /></CommandGroup>)
      const label = screen.getByText('Recent')
      expect(label.className).toMatch(/text-xs/)
    })
  })

  describe('children', () => {
    it('renders children inside the fragment', () => {
      render(
        <CommandGroup label="Navigation">
          <div data-testid="child-item">Item A</div>
        </CommandGroup>
      )
      expect(screen.getByTestId('child-item')).toBeInTheDocument()
    })

    it('renders multiple children', () => {
      render(
        <CommandGroup label="Navigation">
          <div data-testid="item-1">One</div>
          <div data-testid="item-2">Two</div>
          <div data-testid="item-3">Three</div>
        </CommandGroup>
      )
      expect(screen.getByTestId('item-1')).toBeInTheDocument()
      expect(screen.getByTestId('item-2')).toBeInTheDocument()
      expect(screen.getByTestId('item-3')).toBeInTheDocument()
    })
  })

  describe('showBorder prop', () => {
    it('does not add border class by default', () => {
      const { container } = render(
        <CommandGroup label="First"><div /></CommandGroup>
      )
      const header = container.querySelector('.px-3.py-2')
      expect(header?.className).not.toMatch(/border-t/)
    })

    it('does not add border class when showBorder is false', () => {
      const { container } = render(
        <CommandGroup label="First" showBorder={false}><div /></CommandGroup>
      )
      const header = container.querySelector('.px-3.py-2')
      expect(header?.className).not.toMatch(/border-t/)
    })

    it('adds border-t class when showBorder is true', () => {
      const { container } = render(
        <CommandGroup label="Second" showBorder><div /></CommandGroup>
      )
      const header = container.querySelector('.px-3.py-2')
      expect(header?.className).toMatch(/border-t/)
    })

    it('adds border-gray-100 class when showBorder is true', () => {
      const { container } = render(
        <CommandGroup label="Second" showBorder><div /></CommandGroup>
      )
      const header = container.querySelector('.px-3.py-2')
      expect(header?.className).toMatch(/border-gray-100/)
    })
  })
})