/**
 * (share/ui/kbd — single key, group layout).
 */
import React from 'react'
import { render, screen } from '@testing-library/react'
import { Kbd, KbdGroup } from '@/share/ui/kbd'

describe('[share/ui/kbd]', () => {
  describe('Kbd', () => {
    it('renders label text and data-slot', () => {
      render(<Kbd>Enter</Kbd>)
      expect(screen.getByText('Enter')).toBeInTheDocument()
      expect(document.querySelector('[data-slot="kbd"]')).toBeInTheDocument()
    })

    it('applies className', () => {
      render(<Kbd className="custom-kbd">Ctrl</Kbd>)
      expect(document.querySelector('.custom-kbd')).toBeInTheDocument()
    })
  })

  describe('KbdGroup', () => {
    it('wraps multiple keys with kbd-group slot', () => {
      render(
        <KbdGroup>
          <Kbd>Ctrl</Kbd>
          <Kbd>C</Kbd>
        </KbdGroup>,
      )
      expect(document.querySelector('[data-slot="kbd-group"]')).toBeInTheDocument()
      expect(screen.getByText('Ctrl')).toBeInTheDocument()
      expect(screen.getByText('C')).toBeInTheDocument()
    })
  })
})
