"use client";

import * as React from "react";
import { cn } from "@/lib/utils";

export function CubeLoader3D({
  size = 56,
  color = "#8b5cf6",
  speed = 4,
  label,
  className,
}: {
  size?: number;
  color?: string;
  speed?: number;
  label?: string;
  className?: string;
}) {
  const half = size / 2;

  const faces: { transform: string; opacity: number }[] = [
    { transform: "translateZ(" + half + "px)", opacity: 0.9 },
    { transform: "rotateY(180deg) translateZ(" + half + "px)", opacity: 0.5 },
    { transform: "rotateY(90deg) translateZ(" + half + "px)", opacity: 0.75 },
    { transform: "rotateY(-90deg) translateZ(" + half + "px)", opacity: 0.65 },
    { transform: "rotateX(90deg) translateZ(" + half + "px)", opacity: 0.8 },
    { transform: "rotateX(-90deg) translateZ(" + half + "px)", opacity: 0.45 },
  ];

  return (
    <div className={cn("flex flex-col items-center gap-4", className)}>
      <div style={{ width: size, height: size, perspective: size * 6 }}>
        <div
          className="relative size-full"
          style={{
            transformStyle: "preserve-3d",
            animation: "templets-cube-spin " + speed + "s linear infinite",
          }}
        >
          {faces.map((face, index) => (
            <span
              key={index}
              className="absolute inset-0 rounded-[3px] border"
              style={{
                transform: face.transform,
                background: color,
                opacity: face.opacity,
                borderColor: "rgba(255,255,255,0.18)",
              }}
            />
          ))}
        </div>
      </div>

      {label && <span className="text-xs text-muted-foreground">{label}</span>}

      <style>
        {"@keyframes templets-cube-spin { from { transform: rotateX(-24deg) rotateY(0deg) } to { transform: rotateX(-24deg) rotateY(360deg) } }"}
      </style>
    </div>
  );
}

Related components