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

vi.mock('@/Components/Shared/MetricDelta', () => ({
  default: ({ value }: { value: number }) => <span data-testid="metric-delta">{value}</span>,
}));
vi.mock('@/Components/ui/count-up', () => ({
  CountUp: ({ end }: { end: number }) => <span>{end}</span>,
}));

import DataCard from '@/Components/Shared/DataCard';

describe('DataCard', () => {
  it('has no border accent when delta is undefined', () => {
    const { container } = render(<DataCard title="Clicks" value={100} />);

    const card = container.firstChild as HTMLElement;
    expect(card.className).not.toContain('border-l-green');
    expect(card.className).not.toContain('border-l-red');
  });

  it('has no border accent when delta < 20%', () => {
    const { container } = render(<DataCard title="Clicks" value={100} delta={15} />);

    const card = container.firstChild as HTMLElement;
    expect(card.className).not.toContain('border-l-green');
    expect(card.className).not.toContain('border-l-red');
  });

  it('has green border accent when delta >= 50% (positive)', () => {
    const { container } = render(<DataCard title="Clicks" value={100} delta={55} />);

    const card = container.firstChild as HTMLElement;
    expect(card.className).toContain('border-l-emerald-500');
  });

  it('has red border accent when delta >= 50% (negative)', () => {
    const { container } = render(<DataCard title="Clicks" value={100} delta={-60} />);

    const card = container.firstChild as HTMLElement;
    expect(card.className).toContain('border-l-red-500');
  });

  it('has medium accent when delta is between 20-49%', () => {
    const { container: positiveContainer } = render(
      <DataCard title="Clicks" value={100} delta={30} />,
    );

    const positiveCard = positiveContainer.firstChild as HTMLElement;
    expect(positiveCard.className).toContain('border-l-emerald-400/60');

    const { container: negativeContainer } = render(
      <DataCard title="Clicks" value={100} delta={-35} />,
    );

    const negativeCard = negativeContainer.firstChild as HTMLElement;
    expect(negativeCard.className).toContain('border-l-red-400/60');
  });
});