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

describe('TopAccentCards', () => {
  it('renders the title and body for each item', () => {
    render(
      <TopAccentCards
        items={[
          { title: 'Our mission', body: 'Make responsible AI adoption accessible to every enterprise.' },
          { title: 'The problem', body: 'Most AI pilots never reach production.' },
        ]}
      />
    );

    expect(screen.getByText('Our mission')).toBeInTheDocument();
    expect(
      screen.getByText('Make responsible AI adoption accessible to every enterprise.')
    ).toBeInTheDocument();
    expect(screen.getByText('The problem')).toBeInTheDocument();
    expect(screen.getByText('Most AI pilots never reach production.')).toBeInTheDocument();
  });

  it('renders bullets as plain dot markers when provided', () => {
    render(
      <TopAccentCards
        items={[
          {
            title: 'Our mission',
            body: 'Make responsible AI adoption accessible.',
            bullets: ['Enterprise-grade governance', 'Faster time to value'],
          },
        ]}
      />
    );

    expect(screen.getAllByRole('listitem')).toHaveLength(2);
    expect(screen.getByText('Enterprise-grade governance')).toBeInTheDocument();
  });

  it('omits the bullet list when bullets are not provided', () => {
    render(<TopAccentCards items={[{ title: 'Our mission', body: 'Make AI accessible.' }]} />);

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

  it('applies the color-specific top border accent class per item', () => {
    const { container } = render(
      <TopAccentCards
        items={[
          { title: 'Mission', body: 'Body copy.', color: 'success' },
          { title: 'Problem', body: 'Body copy.' },
        ]}
      />
    );

    const cards = container.querySelectorAll('[data-slot="card"]');
    expect(cards[0]).toHaveClass('border-t-success');
    expect(cards[1]).toHaveClass('border-t-primary');
  });

  it('applies a custom className passed on an individual item', () => {
    const { container } = render(
      <TopAccentCards items={[{ title: 'Mission', body: 'Body copy.', className: 'shadow-lg' }]} />
    );

    const card = container.querySelector('[data-slot="card"]');
    expect(card).toHaveClass('shadow-lg');
  });
});