import { formsBaseTheme } from '../forms.theme.js';

/**
 * Default theme for the Signature component
 * Extends the common forms base theme for consistency
 */
const signatureTheme = {
    // Base container styles - inherited from common form theme
    wrapperStyle: formsBaseTheme.wrapperStyle,
    // Input group styles - extends the common input group style for consistent borders/focus
    inputGroupStyle: formsBaseTheme.inputGroupBaseStyle,
    // Canvas wrapper style - minimal, container handles borders/focus
    baseStyle: "relative overflow-hidden w-full h-full",
    // Canvas element style
    canvasStyle: "block w-full h-full cursor-crosshair touch-none focus:outline-none",
    // Placeholder text style
    placeholderStyle: "absolute inset-0 flex items-center justify-center pointer-events-none text-[var(--color-text-placeholder)] text-base",
    // Control buttons container style
    controlsStyle: "absolute bottom-2 right-2 flex gap-2 z-10",
    // Size variants - use shared padding system
    sizes: {
        sm: `${formsBaseTheme.sizes.sm.padding}`,
        md: `${formsBaseTheme.sizes.md.padding}`,
        lg: `${formsBaseTheme.sizes.lg.padding}`,
    },
    // State variants - inherited from common form theme
    states: formsBaseTheme.states,
    // Helper text styles - inherited from common form theme
    helperText: formsBaseTheme.helperText,
};

export { signatureTheme };
