/** * OptimizationButton Component * * Standardized optimization button component extracted from Site Identity patterns. * Supports different optimization types (AI, rule-based, validation, testing, generation) * with consistent styling and behavior across all Essential SEO tabs. * * @package ThinkRank * @since 1.0.0 */ import { Button } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; /** * OptimizationButton Component * * @param {Object} props Component props * @param {string} props.type Button type: 'ai', 'rule', 'validate', 'test', 'generate' * @param {Function} props.onClick Click handler function * @param {boolean} props.isBusy Loading/busy state * @param {boolean} props.disabled Disabled state * @param {string} props.label Custom button label (overrides default) * @param {string} props.loadingLabel Custom loading label (overrides default) * @param {string} props.size Button size: 'small', 'default', 'large' * @param {string} props.className Additional CSS classes * @param {Object} props.rest Additional props passed to Button component */ const OptimizationButton = ({ type = 'rule', onClick, isBusy = false, disabled = false, label, loadingLabel, size = 'default', className = '', ...rest }) => { /** * Get button configuration based on type * Extracted from Site Identity getOptimizationButtonConfig pattern */ const getButtonConfig = () => { const configs = { ai: { variant: 'secondary', defaultLabel: __('AI Optimize', 'thinkrank'), defaultLoadingLabel: __('AI Optimizing...', 'thinkrank'), className: 'thinkrank-btn-ai' }, rule: { variant: 'secondary', defaultLabel: __('Optimize', 'thinkrank'), defaultLoadingLabel: __('Optimizing...', 'thinkrank'), className: 'thinkrank-btn-rule' }, validate: { variant: 'secondary', defaultLabel: __('Validate', 'thinkrank'), defaultLoadingLabel: __('Validating...', 'thinkrank'), className: 'thinkrank-btn-validate' }, test: { variant: 'secondary', defaultLabel: __('Test Connection', 'thinkrank'), defaultLoadingLabel: __('Testing...', 'thinkrank'), className: 'thinkrank-btn-test' }, generate: { variant: 'secondary', defaultLabel: __('Generate', 'thinkrank'), defaultLoadingLabel: __('Generating...', 'thinkrank'), className: 'thinkrank-btn-generate' } }; return configs[type] || configs.rule; }; const config = getButtonConfig(); // Combine CSS classes following Site Identity pattern const buttonClasses = [ config.className, className ].filter(Boolean).join(' '); /** * Handle click event with loading state protection * Following Site Identity onClick pattern */ const handleClick = (event) => { if (!isBusy && !disabled && onClick) { onClick(event); } }; return ( ); }; export default OptimizationButton;