import React from 'react'
import { describe, expect, it } from 'vitest'
import { render } from '@testing-library/react'
import { MemoryRouter } from 'react-router-dom'
import { readFileSync } from 'fs'
import { join } from 'path'
import BottomDock from './BottomDock'

describe('BottomDock', () => {
  it('keeps secondary links available on desktop and marks them for mobile hiding', () => {
    const { container } = render(
      <MemoryRouter initialEntries={['/']}>
        <BottomDock />
      </MemoryRouter>,
    )

    expect(container.querySelectorAll('.dock-item')).toHaveLength(8)
    expect(container.querySelectorAll('.dock-item-wrapper-secondary')).toHaveLength(3)
    expect(container.querySelectorAll('.dock-item[aria-label]')).toHaveLength(8)
  })

  it('reserves mobile space and keeps touch targets at least 44 pixels', () => {
    const css = readFileSync(join(process.cwd(), 'src', 'components', 'BottomDock.css'), 'utf-8')
    const mobileRule = css.match(/@media \(max-width: 600px\) \{([\s\S]*)\}\s*$/)

    expect(mobileRule?.[1]).toContain('dock-item-wrapper-secondary')
    expect(mobileRule?.[1]).toMatch(/width: 44px/)
    expect(mobileRule?.[1]).toMatch(/height: 44px/)
  })
})