import React from 'react'
import { renderWithProviders, screen } from '@/__tests__/utils/test-helpers'
import Stats from './stats'

describe('Stats Component', () => {
  it('should render stats section with heading', () => {
    renderWithProviders(<Stats />)
    expect(screen.getByText('Trusted by Creators')).toBeInTheDocument()
  })

  it('should display description', () => {
    renderWithProviders(<Stats />)
    expect(screen.getByText(/portfolio host is the platform of choice/i)).toBeInTheDocument()
  })

  it('should display all default stats', () => {
    renderWithProviders(<Stats />)
    expect(screen.getByText(/portfolios hosted/i)).toBeInTheDocument()
    expect(screen.getByText(/uptime guarantee/i)).toBeInTheDocument()
    expect(screen.getByText(/active users/i)).toBeInTheDocument()
    expect(screen.getByText(/average deploy time/i)).toBeInTheDocument()
  })

  it('should display stat values', () => {
    renderWithProviders(<Stats />)
    expect(screen.getByText('10,000+')).toBeInTheDocument()
    expect(screen.getByText('99.9%')).toBeInTheDocument()
    expect(screen.getByText('50,000+')).toBeInTheDocument()
  })

  it('should accept custom stats', () => {
    const customStats = [
      { id: 'custom', label: 'Custom Stat', value: '999' },
    ]
    renderWithProviders(<Stats stats={customStats} />)
    expect(screen.getByText('Custom Stat')).toBeInTheDocument()
    expect(screen.getByText('999')).toBeInTheDocument()
  })

  it('should have responsive grid layout', () => {
    const { container } = renderWithProviders(<Stats />)
    const grid = container.querySelector('.grid')
    expect(grid).toHaveClass('grid-cols-1', 'md:grid-cols-2', 'lg:grid-cols-4')
  })

  it('should have gradient background', () => {
    const { container } = renderWithProviders(<Stats />)
    const section = container.querySelector('section')
    expect(section).toHaveClass('bg-gradient-to-r', 'from-purple-600', 'to-pink-600')
  })

  it('should display stats with proper spacing', () => {
    const { container } = renderWithProviders(<Stats />)
    const section = container.querySelector('section')
    expect(section).toHaveClass('py-16', 'md:py-24')
  })
})