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

jest.mock('lucide-react', () => ({
  Zap: () => <span data-testid="zap-icon" />,
  Shield: () => <span data-testid="shield-icon" />,
  Globe: () => <span data-testid="globe-icon" />,
  Smartphone: () => <span data-testid="smartphone-icon" />,
}))

describe('Items Component', () => {
  it('should render items section with heading', () => {
    renderWithProviders(<Items />)
    expect(screen.getByText('Why Choose Portfolio Host?')).toBeInTheDocument()
  })

  it('should display section description', () => {
    renderWithProviders(<Items />)
    expect(screen.getByText(/everything you need to share your work/i)).toBeInTheDocument()
  })

  it('should display all default items', () => {
    renderWithProviders(<Items />)
    expect(screen.getByText('Lightning Fast')).toBeInTheDocument()
    expect(screen.getByText('Secure & Reliable')).toBeInTheDocument()
    expect(screen.getByText('Custom Domains')).toBeInTheDocument()
    expect(screen.getByText('Mobile Optimized')).toBeInTheDocument()
  })

  it('should display item descriptions', () => {
    renderWithProviders(<Items />)
    expect(screen.getByText(/deploy your portfolio instantly/i)).toBeInTheDocument()
    expect(screen.getByText(/enterprise-grade security/i)).toBeInTheDocument()
  })

  it('should accept custom items', () => {
    const customItems = [
      {
        id: 'custom',
        title: 'Custom Feature',
        description: 'This is a custom feature',
        icon: 'zap' as const,
      },
    ]
    renderWithProviders(<Items items={customItems} />)
    expect(screen.getByText('Custom Feature')).toBeInTheDocument()
    expect(screen.getByText('This is a custom feature')).toBeInTheDocument()
  })

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

  it('should display icons for each item', () => {
    renderWithProviders(<Items />)
    const icons = screen.getAllByTestId(/-(icon|zap-icon|shield-icon|globe-icon|smartphone-icon)/)
    expect(icons.length).toBeGreaterThan(0)
  })

  it('should have hover effect on items', () => {
    const { container } = renderWithProviders(<Items />)
    const items = container.querySelectorAll('[class*="hover:shadow"]')
    expect(items.length).toBeGreaterThan(0)
  })
})