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

const t = (key: string) => key;

describe('BadgesGrid', () => {
  it('adds dark mode classes for earned and pending badges', () => {
    render(
      <BadgesGrid
        badges={[
          {
            id: '1',
            title: 'First Upload',
            description: 'Uploaded your first photo',
            earned: true,
            progress: 1,
            target: 1,
          },
          {
            id: '2',
            title: 'Social Star',
            description: 'Received 10 likes',
            earned: false,
            progress: 3,
            target: 10,
          },
        ]}
        t={t}
      />,
    );

    const earnedCard = screen.getByTestId('badge-card-1');
    expect(earnedCard.className).toContain('dark:from-emerald-400/20');
    expect(earnedCard.className).toContain('dark:text-emerald-50');

    const pendingCard = screen.getByTestId('badge-card-2');
    expect(pendingCard.className).toContain('bg-card/90');
    expect(pendingCard.className).toContain('border-border/60');
  });
});