import { useState } from 'react';
import { toast } from "react-toastify";
import Icon from '@iconify/react'
const apiUrl = process.env.NEXT_PUBLIC_API_URL;

const APIKeyReset = () => {
    const [setResetResponse] = useState(null);

    const handleResetApiKey = async () => {
        try {
            const token = localStorage.getItem(token);
            if (!token) {
                console.error('Token not found');
                return;
            }

            const response = await fetch(`${apiUrl}/auth/user/apikeyreset`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${token}`,
                },
            });

            const data = await response.json();
            setResetResponse(data);
        } catch (error) {
            toast.error('API Key reset error', error.message, {
                position: 'bottom-center',
                autoClose: 3000,
                hideProgressBar: false,
                closeOnClick: true,
                pauseOnHover: true,
                draggable: true,
                theme: 'dark',
            });
        }
    };

    return (
        <div className='apikeyreset'>
            <button onClick={handleResetApiKey}><Icon icon='ic:round-restart-alt'/></button>
        </div>
    );
};

export default APIKeyReset;

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `APIKeyReset`.