import React from 'react';

const MoleculeAvatar: React.FC = () => {
  return (
    <div className="molecule-container">
      <div className="molecule"></div>
      <div className="molecule"></div>
      <div className="molecule"></div>
      <style >{`
        .molecule-container {
          position: relative;
          width: 200px;
          height: 200px;
          overflow: hidden;
          display: flex;
          justify-content: center;
          align-items: center;
          perspective: 500px;
          animation: rotateContainer 10s linear infinite;
        }

        .molecule {
          position: absolute;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          background-color: teal;
        }

        @keyframes float1 {
          0% { transform: translate(0px, 0px) translateZ(0px); }
          50% { transform: translate(30px, 20px) translateZ(20px); }
          100% { transform: translate(0px, 0px) translateZ(0px); }
        }
        
        @keyframes float2 {
          0% { transform: translate(0px, 0px) translateZ(0px); }
          50% { transform: translate(-25px, 30px) translateZ(-15px); }
          100% { transform: translate(0px, 0px) translateZ(0px); }
        }
        
        @keyframes float3 {
          0% { transform: translate(0px, 0px) translateZ(0px); }
          50% { transform: translate(20px, -25px) translateZ(10px); }
          100% { transform: translate(0px, 0px) translateZ(0px); }
        }

        @keyframes rotateContainer {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
        }

        .molecule:nth-child(1) { animation: float1 3s ease-in-out infinite; }
        .molecule:nth-child(2) { animation: float2 3.5s ease-in-out infinite; }
        .molecule:nth-child(3) { animation: float3 4s ease-in-out infinite; }

        @media (max-width: 600px) {
          .molecule-container {
            width: 150px;
            height: 150px;
          }
          .molecule {
            width: 30px;
            height: 30px;
          }
        }

        @media (max-width: 400px) {
          .molecule-container {
            width: 120px;
            height: 120px;
          }
          .molecule {
            width: 25px;
            height: 25px;
          }
        }
      `}</style>
    </div>
  );
};

export default MoleculeAvatar;
