import { Loader2 } from "lucide-react";

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