// src/components/AchievementsList.test.tsx
import React from 'react';
import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { AchievementsList } from './AchievementsList';
import { Achievement, UserAchievement } from '../types';

/**
 * A mock factory for creating achievement data for tests.
 * This makes the test setup cleaner and more reusable.
 * @param overrides - Partial data to override the defaults.
 */
const createMockAchievement = (overrides: Partial<UserAchievement & Achievement>): (UserAchievement & Achievement) => ({
  achievement_id: 1,
  user_id: 'user-123',
  achieved_at: new Date().toISOString(),
  name: 'Test Achievement',
  description: 'A default description.',
  icon: 'heart',
  points_value: 10,
  ...overrides,
});

describe('AchievementsList', () => {
  it('should render the list of achievements with correct details', () => {
    const mockAchievements = [
      createMockAchievement({
        name: 'Recipe Creator',
        description: 'Create your first recipe.',
        icon: 'chef-hat',
        points_value: 25,
      }),
      createMockAchievement({ name: 'List Maker', icon: 'list', points_value: 15 }),
      createMockAchievement({ name: 'Unknown Achievement', icon: 'star' }), // This icon is not in the component's map
    ];

    render(<AchievementsList achievements={mockAchievements} />);

    expect(screen.getByRole('heading', { name: /achievements/i })).toBeInTheDocument();

    // Check first achievement
    expect(screen.getByText('Recipe Creator')).toBeInTheDocument();
    expect(screen.getByText('Create your first recipe.')).toBeInTheDocument();
    expect(screen.getByText('+25 Points')).toBeInTheDocument();
    expect(screen.getByText('🧑‍🍳')).toBeInTheDocument(); // Icon for 'chef-hat'

    // Check second achievement
    expect(screen.getByText('List Maker')).toBeInTheDocument();
    expect(screen.getByText('📋')).toBeInTheDocument(); // Icon for 'list'

    // Check achievement with default icon
    expect(screen.getByText('Unknown Achievement')).toBeInTheDocument();
    expect(screen.getByText('🏆')).toBeInTheDocument(); // Default icon
  });

  it('should render a message when there are no achievements', () => {
    render(<AchievementsList achievements={[]} />);
    expect(screen.getByText('No achievements earned yet. Keep exploring to unlock them!')).toBeInTheDocument();
  });
});