import React, { useState, useEffect } from 'react';const BoxBreathing = () => {  const [phase, setPhase] = useState(0);  const [progress, setProgress] = useState(0);  const phases = ['Inhale', 'Hold', 'Exhale', 'Hold'];  const duration = 4000; // 4 seconds per phase  useEffect(() => {    const timer = setInterval(() => {      setProgress((oldProgress) => {        if (oldProgress === 100) {          setPhase((oldPhase) => (oldPhase + 1) % 4);          return 0;        }        return oldProgress + 1;      });    }, duration / 100);    return () => clearInterval(timer);  }, []);  const getBoxStyle = (index) => ({    position: 'absolute',    width: `${100 - index * 25}%`,    height: `${100 - index * 25}%`,    border: '2px solid #3498db',    boxSizing: 'border-box',    transition: 'all 0.3s ease',    opacity: phase === index ? 1 : 0.3,    transform: `rotate(${progress * 0.9}deg)`,  });  return (    <div style={{       display: 'flex',       flexDirection: 'column',       alignItems: 'center',       fontFamily: 'Arial, sans-serif',      backgroundColor: '#f0f8ff',      padding: '20px',      borderRadius: '10px',      boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)'    }}>      <h2 style={{ marginBottom: '20px', color: '#2c3e50' }}>Box Breathing</h2>      <div style={{ position: 'relative', width: '200px', height: '200px' }}>        {[0, 1, 2, 3].map((index) => (          <div key={index} style={getBoxStyle(index)} />        ))}        <div style={{          position: 'absolute',          top: '50%',          left: '50%',          transform: 'translate(-50%, -50%)',          fontSize: '24px',          fontWeight: 'bold',          color: '#2c3e50'        }}>          {phases[phase]}        </div>      </div>      <div style={{ marginTop: '20px', fontSize: '18px', color: '#34495e' }}>        {phases[phase]}      </div>    </div>  );};export default BoxBreathing;