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

describe('Hero', () => {
  it('renders the title and description', () => {
    render(
      <Hero
        title="AI adoption, without the guesswork"
        description="Deploy production-ready assistants across your organization in weeks, not months."
      />
    );

    expect(screen.getByText('AI adoption, without the guesswork')).toBeInTheDocument();
    expect(
      screen.getByText(
        'Deploy production-ready assistants across your organization in weeks, not months.'
      )
    ).toBeInTheDocument();
  });

  it('renders the eyebrow pill when provided', () => {
    render(<Hero title="Headline" eyebrow={{ label: 'AI Adoption Platform' }} />);

    expect(screen.getByText('AI Adoption Platform')).toBeInTheDocument();
  });

  it('omits the eyebrow when not provided', () => {
    render(<Hero title="Headline" />);

    expect(screen.queryByText('AI Adoption Platform')).not.toBeInTheDocument();
  });

  it('renders primary and secondary CTAs as links when href is given', () => {
    render(
      <Hero
        title="Headline"
        primaryCta={{ label: 'Get started', href: '/start' }}
        secondaryCta={{ label: 'Learn more', href: '/learn' }}
      />
    );

    expect(screen.getByRole('link', { name: 'Get started' })).toHaveAttribute('href', '/start');
    expect(screen.getByRole('link', { name: 'Learn more' })).toHaveAttribute('href', '/learn');
  });

  it('renders a CTA as a button and fires onClick when no href is given', () => {
    const onClick = vi.fn();
    render(<Hero title="Headline" primaryCta={{ label: 'Get started', onClick }} />);

    const button = screen.getByRole('button', { name: 'Get started' });
    button.click();
    expect(onClick).toHaveBeenCalledTimes(1);
  });

  it('does not render a CTA container when neither CTA is provided', () => {
    render(<Hero title="Headline" />);

    expect(screen.queryByRole('link')).not.toBeInTheDocument();
    expect(screen.queryByRole('button')).not.toBeInTheDocument();
  });

  it('renders the visual and switches to a two-column layout', () => {
    const { container } = render(
      <Hero title="Headline" visual={<div data-testid="hero-visual" />} />
    );

    expect(screen.getByTestId('hero-visual')).toBeInTheDocument();
    expect(container.querySelector('.grid')).toHaveClass('lg:grid-cols-2');
  });

  it('centers content when align is "center"', () => {
    const { container } = render(<Hero title="Headline" align="center" />);

    const contentBlock = container.querySelector('h1')?.parentElement;
    expect(contentBlock).toHaveClass('items-center', 'text-center');
  });
});