import { Loader2 } from "lucide-react";

// 创建流光钮
export function ActionButton({
  isCreating,
  handleCreateVideo,
  icon,
}: {
  isCreating: boolean;
  handleCreateVideo: () => void;
  icon: React.ReactNode;
}) {
  return (
    <div className="relative group">
      <div
        data-alt="action-button"
        className="relative w-12 h-12 opacity-90 cursor-pointer overflow-hidden rounded-xl bg-black z-10"
        onClick={isCreating ? undefined : handleCreateVideo}
      >
        <div className="absolute z-10 -translate-x-12 group-hover:translate-x-12 transition-all duration-700 h-full w-12 bg-gradient-to-r from-gray-500 to-white/10 opacity-30 -skew-x-12"></div>
        <div className="absolute flex items-center justify-center text-white z-[1] opacity-90 rounded-xl inset-0.5 bg-black">
          <button
            name="text"
            className="w-full h-full opacity-90 rounded-xl bg-black flex items-center justify-center"
          >
            {isCreating ? <Loader2 className="w-5 h-5 animate-spin" /> : icon}
          </button>
        </div>
        <div className="absolute duration-1000 group-hover:animate-spin w-full h-12 bg-gradient-to-r from-[rgb(106,244,249)] to-[rgb(199,59,255)] blur-[20px]"></div>
      </div>
    </div>
  );
}