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

describe('FeatureCard', () => {
  it('renders the title, description and icon', () => {
    render(
      <FeatureCard
        title="Dashboard"
        description="Visualize métricas em tempo real."
        icon={<svg data-testid="icon" />}
      />
    );
    expect(screen.getByText('Dashboard')).toBeInTheDocument();
    expect(screen.getByText('Visualize métricas em tempo real.')).toBeInTheDocument();
    expect(screen.getByTestId('icon')).toBeInTheDocument();
  });

  it('does not render a footer button when actionLabel is omitted', () => {
    render(<FeatureCard title="A" description="B" icon={<svg />} />);
    expect(screen.queryByRole('button')).not.toBeInTheDocument();
  });

  it('renders the footer button and calls onAction when clicked', () => {
    const onAction = vi.fn();
    render(
      <FeatureCard
        title="A"
        description="B"
        icon={<svg />}
        actionLabel="Visualizar"
        onAction={onAction}
      />
    );
    const button = screen.getByRole('button', { name: 'Visualizar' });
    fireEvent.click(button);
    expect(onAction).toHaveBeenCalledTimes(1);
  });

  it('renders the badge only when a badge prop is provided', () => {
    const { rerender } = render(
      <FeatureCard title="A" description="B" icon={<svg />} badge="Novo" />
    );
    expect(screen.getByText('Novo')).toBeInTheDocument();

    rerender(<FeatureCard title="A" description="B" icon={<svg />} />);
    expect(screen.queryByText('Novo')).not.toBeInTheDocument();
  });

  it('applies the primary color token classes by default', () => {
    const { container } = render(<FeatureCard title="A" description="B" icon={<svg />} />);
    expect(container.querySelector('.bg-primary\\/10')).toBeInTheDocument();
    expect(container.querySelector('.text-primary')).toBeInTheDocument();
  });

  it('applies the corresponding color token classes for a semantic color', () => {
    const { container } = render(
      <FeatureCard title="A" description="B" icon={<svg />} color="success" />
    );
    expect(container.querySelector('.bg-success\\/10')).toBeInTheDocument();
    expect(container.querySelector('.text-success')).toBeInTheDocument();
  });
});