'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Loader2, CircleAlert } from 'lucide-react';
import { cn } from '../../../lib/utils.js';
import { Button } from '../../ui/button.js';
import { useSoundAction } from '../../../hooks/use-sound-action.js';
export function ActionButton({ label, onClick, loading, error, icon: Icon, iconOnly = false, variant = 'outline', size = 'sm', }) {
    const clickSound = useSoundAction('click');
    const handleClick = () => {
        clickSound.play();
        onClick();
    };
    return (_jsxs(Button, { variant: variant, size: size, "aria-label": label, disabled: loading, onClick: handleClick, className: cn('gap-1.5', error && 'text-destructive hover:text-destructive', !error &&
            iconOnly &&
            variant === 'ghost' &&
            'text-muted-foreground cursor-pointer rounded-full transition-colors hover:text-blue-500'), children: [loading ? (_jsx(Loader2, { className: "size-4 animate-spin" })) : error ? (_jsx(CircleAlert, { className: "size-4" })) : (_jsx(Icon, { className: "size-4" })), iconOnly ? null : label] }));
}
