/**
 * (share/ui/tabs — root attrs, TabsList variants, trigger/content slots).
 */
import React from 'react'
import { render } from '@testing-library/react'

import {
  Tabs,
  TabsList,
  TabsTrigger,
  TabsContent,
  tabsListVariants,
} from '../tabs'

describe('[share/ui/tabs]', () => {
  describe('Tabs root', () => {
    it('sets orientation and merges className', () => {
      const { getByTestId } = render(
        <Tabs data-testid="tabs-root" className="custom-class">
          <div>Child</div>
        </Tabs>,
      )

      const root = getByTestId('tabs-root')
      expect(root.getAttribute('data-slot')).toBe('tabs')
      expect(root.getAttribute('data-orientation')).toBe('horizontal')
      expect(root.className).toContain('group/tabs')
      expect(root.className).toContain('custom-class')
    })
  })

  describe('TabsList variants', () => {
    it('applies default then line variant classes', () => {
      const { getByTestId, rerender } = render(
        <Tabs>
          <TabsList data-testid="tabs-list-default">List</TabsList>
        </Tabs>,
      )

      const defaultList = getByTestId('tabs-list-default')
      expect(defaultList.getAttribute('data-slot')).toBe('tabs-list')
      expect(defaultList.getAttribute('data-variant')).toBe('default')
      expect(defaultList.className).toContain(
        tabsListVariants({ variant: 'default' }),
      )

      rerender(
        <Tabs>
          <TabsList data-testid="tabs-list-line" variant="line">
            List
          </TabsList>
        </Tabs>,
      )

      const lineList = getByTestId('tabs-list-line')
      expect(lineList.getAttribute('data-variant')).toBe('line')
      expect(lineList.className).toContain(tabsListVariants({ variant: 'line' }))
    })
  })

  describe('TabsTrigger and TabsContent', () => {
    it('expose data-slot and layout classes', () => {
      const { getByTestId } = render(
        <Tabs defaultValue="tab1">
          <TabsList>
            <TabsTrigger data-testid="tabs-trigger" value="tab1">
              Tab 1
            </TabsTrigger>
          </TabsList>
          <TabsContent data-testid="tabs-content" value="tab1">
            Content 1
          </TabsContent>
        </Tabs>,
      )

      const trigger = getByTestId('tabs-trigger')
      expect(trigger.getAttribute('data-slot')).toBe('tabs-trigger')
      expect(trigger.className).toContain('inline-flex')

      const content = getByTestId('tabs-content')
      expect(content.getAttribute('data-slot')).toBe('tabs-content')
      expect(content.className).toContain('w-full')
      expect(content.className).toContain('overflow-hidden')
    })
  })
})
