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

const base = {
    label: 'Total Tenants',
    value: '1,247',
    sub: '+12 this month',
    icon: CreditCard,
    iconColor: 'bg-primary/20 text-primary',
};

describe('StatCard', () => {
    it('renders the label', () => {
        render(<StatCard {...base} />);
        expect(screen.getByText('Total Tenants')).toBeInTheDocument();
    });

    it('renders the value', () => {
        render(<StatCard {...base} />);
        expect(screen.getByText('1,247')).toBeInTheDocument();
    });

    it('renders the sub text', () => {
        render(<StatCard {...base} />);
        expect(screen.getByText('+12 this month')).toBeInTheDocument();
    });

    it('renders the trend percentage when provided', () => {
        render(<StatCard {...base} trend="16.4%" positive />);
        expect(screen.getByText('16.4%')).toBeInTheDocument();
    });

    it('does not render a trend badge when trend is not provided', () => {
        render(<StatCard {...base} />);
        expect(screen.queryByText(/%/)).not.toBeInTheDocument();
    });

    it('applies positive (emerald) colours when positive=true', () => {
        render(<StatCard {...base} trend="5%" positive />);
        const badge = screen.getByText('5%').closest('span');
        expect(badge?.className).toContain('bg-emerald-100');
        expect(badge?.className).toContain('text-emerald-700');
    });

    it('applies negative (red) colours when positive=false', () => {
        render(<StatCard {...base} trend="5%" positive={false} />);
        const badge = screen.getByText('5%').closest('span');
        expect(badge?.className).toContain('bg-red-100');
        expect(badge?.className).toContain('text-red-700');
    });

    it('renders the icon container with the provided iconColor class', () => {
        const { container } = render(<StatCard {...base} />);
        const iconBox = container.querySelector('.bg-primary\\/20');
        expect(iconBox).toBeInTheDocument();
    });

    it('wraps content in a div with pf-glass class', () => {
        const { container } = render(<StatCard {...base} />);
        expect(container.firstChild).toHaveClass('pf-glass');
    });
});