3D Cube Rotate

export function CubeRotateButton({ children, variant = 'blue', ...props }) {
  const variants = {
    blue: 'bg-blue-600',
    purple: 'bg-blue-600',
    orange: 'bg-blue-600',
    teal: 'bg-blue-600',
  };

  return (
    <button 
      className={`px-8 py-4 text-white font-bold rounded-lg transition-all duration-500 transform hover:rotate-12 hover:scale-110 shadow-xl hover:shadow-2xl ${variants[variant]}`}
      style={{ 
        transformStyle: 'preserve-3d',
        perspective: '1000px',
      }}
      {...props}
    >
      <span className="block transition-transform duration-500 hover:rotateY-180" style={{ transformStyle: 'preserve-3d' }}>
        {children}
      </span>
    </button>
  );
}

/* ── Live preview accent: "blue" (variant prop + Tailwind above) ── */