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

/**
 * Default theme for the Textarea component
 * Extends the common forms base theme
 */
const textareaTheme = {
    // Base container styles - inherited from common form theme
    wrapperStyle: formsBaseTheme.wrapperStyle,
    // Input group styles - extends the common input group style
    inputGroupStyle: formsBaseTheme.inputGroupBaseStyle,
    // Base textarea styles - extends the common control base style
    baseStyle: `${formsBaseTheme.controlBaseStyle} resize-y`,
    // Size variants - composed from atomic tokens
    sizes: {
        sm: `${formsBaseTheme.sizes.sm.text} ${formsBaseTheme.sizes.sm.padding} ${formsBaseTheme.sizes.sm.textareaHeight}`,
        md: `${formsBaseTheme.sizes.md.text} ${formsBaseTheme.sizes.md.padding} ${formsBaseTheme.sizes.md.textareaHeight}`,
        lg: `${formsBaseTheme.sizes.lg.text} ${formsBaseTheme.sizes.lg.padding} ${formsBaseTheme.sizes.lg.textareaHeight}`,
    },
    // State variants - inherited from common form theme
    states: formsBaseTheme.states,
    // Helper text styles - inherited from common form theme
    helperText: formsBaseTheme.helperText,
};

export { textareaTheme };
