import React, { useState, useEffect } from 'react';

export default function QuizTimer() {

const [time, setTime] = useState(10);

const [isActive, setIsActive] = useState(false);

const [isComplete, setIsComplete] = useState(false);

useEffect(() => {

let interval = null;

if (isActive && time > 0) {

interval = setInterval(() => {

setTime(prevTime => {

if (prevTime <= 1) {

setIsActive(false);

setIsComplete(true);

return 0;

}

return prevTime - 1;

});

}, 1000);

}

return () => {

if (interval) clearInterval(interval);

};

}, [isActive, time]);

const startTimer = () => {

setIsActive(true);

setIsComplete(false);

};

const resetTimer = () => {

setTime(10);

setIsActive(false);

setIsComplete(false);

};

const getColorClass = () => {

if (isComplete) return 'text-red-600';

if (time <= 3) return 'text-red-500';

if (time <= 5) return 'text-orange-500';

return 'text-blue-600';

};

const getFillColor = () => {

if (isComplete) return '#dc2626';

if (time <= 3) return '#ef4444';

if (time <= 5) return '#f97316';

return '#2563eb';

};

// Calculer l'angle pour le camembert (360° = 10 secondes)

const angle = (time / 10) * 360;

// Créer le chemin SVG pour le camembert

const createPieSlice = (angle) => {

const radius = 100;

const centerX = 120;

const centerY = 120;

// Commencer du haut (12 heures)

const startAngle = -90;

const endAngle = startAngle + angle;

const startRad = (startAngle * Math.PI) / 180;

const endRad = (endAngle * Math.PI) / 180;

const x1 = centerX + radius * Math.cos(startRad);

const y1 = centerY + radius * Math.sin(startRad);

const x2 = centerX + radius * Math.cos(endRad);

const y2 = centerY + radius * Math.sin(endRad);

const largeArc = angle > 180 ? 1 : 0;

return `M ${centerX} ${centerY} L ${x1} ${y1} A ${radius} ${radius} 0 ${largeArc} 1 ${x2} ${y2} Z`;

};

return (

<div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 to-blue-100 p-8">

<div className="bg-white rounded-3xl shadow-2xl p-12 max-w-md w-full">

<h1 className="text-3xl font-bold text-center mb-8 text-gray-800">

Timer de Quiz

</h1>

<div className="relative w-64 h-64 mx-auto mb-8 flex items-center justify-center">

<svg className="absolute top-0 left-0 w-full h-full" viewBox="0 0 240 240">

{/* Cercle de fond */}

<circle

cx="120"

cy="120"

r="100"

fill="#e5e7eb"

/>

{/* Camembert qui se réduit */}

<path

d={createPieSlice(angle)}

fill={getFillColor()}

className="transition-all duration-1000 ease-linear"

/>

{/* Cercle intérieur blanc */}

<circle

cx="120"

cy="120"

r="70"

fill="white"

/>

</svg>

<div className={`text-7xl font-bold ${getColorClass()} transition-all duration-300 z-10`}>

{time}

</div>

</div>

{isComplete && (

<div className="text-center mb-6 animate-bounce">

<p className="text-2xl font-bold text-red-600">Temps écoulé !</p>

</div>

)}

<div className="flex gap-4 justify-center">

{!isActive && !isComplete && (

<button

onClick={startTimer}

className="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-8 rounded-xl transition-all duration-200 transform hover:scale-105 shadow-lg"

>

Démarrer

</button>

)}

{(isActive || isComplete) && (

<button

onClick={resetTimer}

className="bg-gray-500 hover:bg-gray-600 text-white font-bold py-3 px-8 rounded-xl transition-all duration-200 transform hover:scale-105 shadow-lg"

>

Réinitialiser

</button>

)}

</div>

<div className="mt-8 text-center text-sm text-gray-600">

<p>Le timer compte de 10 à 0 secondes</p>

</div>

</div>

</div>

);

}