import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import { MetricCard } from '../dashboard/MetricCard';

const LOCK_LABEL = "Not available on dealer's plan";

describe('MetricCard', () => {
  it('renders the value and label without a lock by default', () => {
    render(<MetricCard label="Traffic" value={1234} subLabel="Visits" changePercent={12.5} />);

    expect(screen.getByText('Traffic')).toBeInTheDocument();
    expect(screen.getByText('1,234')).toBeInTheDocument();
    expect(screen.getByText('Visits')).toBeInTheDocument();
    expect(screen.queryByLabelText(LOCK_LABEL)).not.toBeInTheDocument();
  });

  it('shows the lock icon when locked (admin support view)', () => {
    render(<MetricCard label="Traffic" value={0} subLabel="Visits" changePercent={0} locked />);

    expect(screen.getByLabelText(LOCK_LABEL)).toBeInTheDocument();
    // Still renders the underlying metric so an admin can read it.
    expect(screen.getByText('Traffic')).toBeInTheDocument();
  });
});