script.js

async function fetchAvatarData() {
    const apiKey = document.getElementById('apiKey').value.trim();
    const resultContainer = document.getElementById('resultContainer');
    const errorContainer = document.getElementById('errorContainer');
    const fetchBtn = document.getElementById('fetchBtn');

    // Clear previous results
    resultContainer.classList.add('hidden');
    errorContainer.classList.add('hidden');
    
    if (!apiKey) {
        showError('Please enter your X-Avatar-Key');
        return;
    }

    try {
        // Show loading state
        fetchBtn.disabled = true;
        fetchBtn.innerHTML = `<i data-feather="loader" class="loading"></i> Fetching...`;
        feather.replace();

        // Mock API call - replace with your actual API endpoint
        const mockAvatar = {
            name: "Generated Avatar",
            imageUrl: "https://static.photos/abstract/200x200/" + Math.floor(Math.random() * 1000),
            details: "This is a mock response. Replace with actual API call.",
            id: Math.random().toString(36).substring(2, 9)
        };

        // Simulate network delay
        await new Promise(resolve => setTimeout(resolve, 1000));

        // Display results
        document.getElementById('avatarName').textContent = mockAvatar.name;
        document.getElementById('avatarDetails').textContent = mockAvatar.details;
        document.getElementById('avatarPreview').innerHTML = 
            `<img src="${mockAvatar.imageUrl}" alt="${mockAvatar.name}" class="w-full h-full object-cover">`;
        
        resultContainer.classList.remove('hidden');
    } catch (error) {
        showError(`Error: ${error.message}`);
    } finally {
        // Reset button
        fetchBtn.disabled = false;
        fetchBtn.innerHTML = `<i data-feather="download"></i> Fetch Avatar Data`;
        feather.replace();
    }
}

function showError(message) {
    const errorContainer = document.getElementById('errorContainer');
    errorContainer.textContent = message;
    errorContainer.classList.remove('hidden');
}