Reactjs: Criação de uma tela de sorteio no formato de roleta

Projeto ReactJS, NextJS e tailwindcss com uma tela de sorteio no formato de roleta


O carregamento inicial da tela deve acessar uma API que retornará os dados que serão usados para controlar a quantidade de sorteios disponíveis.

Exemplo de retorno:

{
    "tentativasRestante":3,
    "mensagem":"Você tem três tentativas",
    
}

A tela de exibir essa mensagem e um botão para "Abrir a roleta".


Ao clicar no botão "Abrir a roleta" a tela deve abrir a roleta em tela cheia, com opacidade de 40% e com a roleta no centro.
Antes de carregar a roleta, a aplicação deve acessar um endpoint para obter os parâmetros e o resultado do sorteio.
Exemplo de retorno da API:
{
"premios":[
        {"descricao":"Premio 1",
         "imagem":"link_da_imagem1.png",
         "indice":0
        },{"descricao":"Tente outra vez",
         "imagem":null,
         "indice":1
        },{"descricao":"Premio 2",
         "imagem":"link_da_imagem2.png",
         "indice":2
        },{"descricao":"Tente outra vez",
         "imagem":null,
         "indice":3
        },{"descricao":"Premio 3",
         "imagem":"link_da_imagem3.png",
         "indice":4
        },{"descricao":"Tente outra vez",
         "imagem":null,
         "indice":5
        }
    ,
    "tentativasRestante":0,
    "indiceSorteado":2,
    "premiado":false,
    "mensagemPremiacao":"Não foi dessa vez. Tente novamente",
    "mensagem":"Sua roleta não estava premiada"
}

Cada elemento na lista "premios" representa uma parte da roleta.
A quantidade é dinâmica, mas sempre par.
A imagem nem sempre terá valor, mas deve ser carregada quando tiver.
O campo indice é usando apenas para calcular o resultado da roleta.

O campo "indiceSorteado" indica onde a roleta deve parar no momento do sorteio, considerando o campo "indice" do premio.
É Necessário que a roleta faça vários giros para indicar aleatoriedade

Ao final do giro, a aplicação deve aguardar 1 segundo e então mostrar um modal com a "mensagemPremiacao" retornada e um botão para fechar o modal.
Ao fechar o modal, a mensagem inicial deve ser atualizada.

Implementação de referência para tela:
https://wbr6t7.csb.app/


Atenção: Os dados de acesso para as API's só serão informados após a contratação.