import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { FeatureRow } from './FeatureRow';
import React from 'react';

describe('FeatureRow', () => {
  it('renders the title, eyebrow, description, and visual', () => {
    render(
      <FeatureRow
        eyebrow="Automation"
        title="Automate repetitive approvals"
        description="Let AI triage low-risk requests so your team focuses on exceptions."
        visual={<div data-testid="visual">Visual</div>}
      />
    );

    expect(screen.getByText('Automation')).toBeInTheDocument();
    expect(screen.getByText('Automate repetitive approvals')).toBeInTheDocument();
    expect(
      screen.getByText('Let AI triage low-risk requests so your team focuses on exceptions.')
    ).toBeInTheDocument();
    expect(screen.getByTestId('visual')).toBeInTheDocument();
  });

  it('omits the eyebrow and description when not provided', () => {
    render(<FeatureRow title="Automate repetitive approvals" visual={<div />} />);

    expect(screen.getByText('Automate repetitive approvals')).toBeInTheDocument();
    expect(screen.queryByText('Automation')).not.toBeInTheDocument();
  });

  it('renders bullets as a checklist when provided', () => {
    render(
      <FeatureRow
        title="Automate repetitive approvals"
        bullets={['Faster turnaround', 'Fewer manual errors', 'Full audit trail']}
        visual={<div />}
      />
    );

    expect(screen.getByText('Faster turnaround')).toBeInTheDocument();
    expect(screen.getByText('Fewer manual errors')).toBeInTheDocument();
    expect(screen.getByText('Full audit trail')).toBeInTheDocument();
    expect(screen.getAllByRole('listitem')).toHaveLength(3);
  });

  it('does not render a bullet list when bullets is empty or omitted', () => {
    render(<FeatureRow title="Automate repetitive approvals" visual={<div />} />);

    expect(screen.queryByRole('list')).not.toBeInTheDocument();
  });

  it('applies the reverse order class when reverse is true', () => {
    const { container } = render(
      <FeatureRow title="Automate repetitive approvals" visual={<div />} reverse />
    );

    const textBlock = container.querySelector('h2')?.parentElement;
    expect(textBlock).toHaveClass('lg:order-last');
  });

  it('applies the correct background class for each tone', () => {
    const { container, rerender } = render(
      <FeatureRow title="Feature" visual={<div />} tone="muted" />
    );
    expect(container.querySelector('section')).toHaveClass('bg-muted');

    rerender(<FeatureRow title="Feature" visual={<div />} tone="card" />);
    expect(container.querySelector('section')).toHaveClass('bg-card');

    rerender(<FeatureRow title="Feature" visual={<div />} tone="default" />);
    expect(container.querySelector('section')).toHaveClass('bg-background');
  });
});