src/components/GlassButton.tsx

import { type ReactNode } from "react";
import GlassContainer from "./GlassContainer";
import { GLASS_EFFECTS } from "../constants";

interface GlassButtonProps {
  children: ReactNode;
  onClick: (e: React.MouseEvent) => void;
  className?: string;
  disabled?: boolean;
  bgColor?: string;
  "aria-label"?: string;
}

export default function GlassButton({

  children,

  onClick,

  className = "",

  disabled = false,

  bgColor = GLASS_EFFECTS.COLORS.BUTTON_BG,

  ...ariaProps

}: GlassButtonProps) {
  return (
    <GlassContainer bgColor={bgColor} className="rounded-xl">

      <button

        className={`px-4 py-2 border-none cursor-pointer bg-transparent transition-transform duration-200 outline-none ${

          disabled ? "opacity-50 cursor-not-allowed" : "hover:scale-105 active:scale-95"

        } ${className}`}

        onClick={disabled ? undefined : onClick}

        disabled={disabled}

        {...ariaProps}

      >

        <div className="font-medium text-white">{children}</div>

      </button>

    </GlassContainer>
  );
}