/**
 * ActionButtons – card action buttons (add to cart, wishlist, buy now, quick view)
 *
 * Renders a set of action buttons for product cards. Can be positioned absolutely
 * over the image (on hover) or inline below the card content.
 */
import React from 'react';
import { clsx } from 'clsx';
const SPACING = {
    xs: 4,
    sm: 8,
    md: 12,
    lg: 16,
    xl: 24,
};
const TRANSITIONS = {
    fast: '150ms ease-in-out',
    normal: '200ms ease-in-out',
    slow: '300ms ease-in-out',
};
const BORDER_RADIUS = {
    sm: 4,
    md: 6,
    lg: 8,
    full: 9999,
};
const SHADOWS = {
    sm: '0 1px 2px rgba(0,0,0,0.05)',
    md: '0 2px 4px rgba(0,0,0,0.1)',
    lg: '0 4px 6px rgba(0,0,0,0.1)',
    xl: '0 10px 15px rgba(0,0,0,0.1)',
};
const DEFAULT_ICONS = {
    addToCart: '🛒',
    wishlist: '♡',
    buyNow: '⚡',
    quickView: '👁',
    compare: '⚖',
};
const DEFAULT_LABELS = {
    addToCart: 'Add to Cart',
    wishlist: 'Wishlist',
    buyNow: 'Buy Now',
    quickView: 'Quick View',
    compare: 'Compare',
};
const BUTTON_SIZES = {
    small: { width: 44, height: 44, fontSize: '0.75rem', iconSize: '1rem' },
    medium: { width: 44, height: 44, fontSize: '0.875rem', iconSize: '1.25rem' },
    large: { width: 44, height: 44, fontSize: '1rem', iconSize: '1.5rem' },
};
export function ActionButtons({ buttons, layout = 'horizontal', position = 'inline', showLabels = false, size = 'medium', className, style, }) {
    const sizeConfig = BUTTON_SIZES[size];
    const isOverlay = position !== 'inline';
    const containerStyle = {
        display: 'flex',
        flexDirection: layout === 'vertical' ? 'column' : 'row',
        gap: SPACING.sm,
        ...(isOverlay ? {
            position: 'absolute',
            ...(position === 'top-right' ? { top: SPACING.sm, right: SPACING.sm } : {}),
            ...(position === 'bottom-center' ? { bottom: SPACING.sm, left: '50%', transform: 'translateX(-50%)' } : {}),
        } : {}),
        ...style,
    };
    const buttonBaseStyle = {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        gap: 4,
        padding: showLabels ? '0 12px' : 0,
        width: showLabels ? 'auto' : sizeConfig.width,
        height: sizeConfig.height,
        fontSize: sizeConfig.fontSize,
        fontWeight: 500,
        border: 'none',
        borderRadius: BORDER_RADIUS.md,
        backgroundColor: 'var(--seekora-bg-surface, transparent)',
        color: 'var(--seekora-text, inherit)',
        cursor: 'pointer',
        transition: `all ${TRANSITIONS.fast}`,
        boxShadow: SHADOWS.md,
    };
    const handleClick = (btn, e) => {
        e.stopPropagation();
        e.preventDefault();
        if (btn.onClick && !btn.disabled && !btn.loading) {
            btn.onClick(e);
        }
    };
    return (React.createElement("div", { className: clsx('seekora-action-buttons', `seekora-action-buttons--${layout}`, className), style: containerStyle }, buttons.map((btn, i) => {
        const icon = btn.icon ?? DEFAULT_ICONS[btn.type];
        const label = btn.label ?? DEFAULT_LABELS[btn.type];
        return (React.createElement("button", { key: i, type: "button", className: clsx('seekora-action-button', `seekora-action-button--${btn.type}`, btn.disabled && 'seekora-action-button--disabled', btn.loading && 'seekora-action-button--loading'), style: {
                ...buttonBaseStyle,
                opacity: btn.disabled ? 0.5 : 1,
                cursor: btn.disabled ? 'not-allowed' : 'pointer',
            }, onClick: (e) => handleClick(btn, e), disabled: btn.disabled, "aria-label": label, title: label }, btn.loading ? (React.createElement("span", { style: { fontSize: sizeConfig.iconSize } }, "\u23F3")) : (React.createElement(React.Fragment, null,
            React.createElement("span", { style: { fontSize: sizeConfig.iconSize } }, icon),
            showLabels && React.createElement("span", null, label)))));
    })));
}
