/**
 * Opt-In Prompt Component
 *
 * Reusable component to display opt-in message and button when user is not opted in
 */

import React from 'react';

interface OptInPromptProps {
    getString: (domain: string, key: string, fallback: string) => string;
    optinUrl?: string;
}

const OptInPrompt: React.FC<OptInPromptProps> = ({ getString, optinUrl }) => {
    return (
        <div className="py-4">
            <div className="space-y-3 text-xs text-wp-gray">
                <div className="flex items-center justify-center mb-2">
                    <span className="text-2xl">⚠️</span>
                </div>
                <p className="text-center font-medium">
                    {getString(
                        'common',
                        'automation_not_active',
                        'Automation features are not active yet.'
                    )}
                </p>
                <p className="text-center">
                    {getString(
                        'common',
                        'opt_in_to_enable',
                        "Opt in to enable cloud-based automation. It's free!"
                    )}
                </p>
                {optinUrl && (
                    <div className="text-center">
                        <a
                            href={optinUrl}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="cpepai-button cpepai-button--secondary text-xs px-4 py-2 inline-block"
                        >
                            {getString('common', 'opt_in', 'Opt In')}
                        </a>
                    </div>
                )}
                <p className="text-center mt-3">
                    {getString(
                        'common',
                        'opt_in_email_confirmation',
                        'Already opted in? Please confirm your email using the activation link we sent.'
                    )}
                </p>
            </div>
        </div>
    );
};

export default OptInPrompt;