import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Button, CheckIcon, Input, PlanePaperIcon } from '@remotion/design';
import { useCallback, useState } from 'react';
import { SectionTitle } from './VideoAppsTitle';
export const NewsletterButton = () => {
    const [email, setEmail] = useState('');
    const [submitting, setSubmitting] = useState(false);
    const [subscribed, setSubscribed] = useState(false);
    const handleSubmit = useCallback(async (e) => {
        try {
            setSubmitting(true);
            e.preventDefault();
            const response = await fetch('https://www.remotion.pro/api/newsletter', {
                method: 'POST',
                body: JSON.stringify({ email }),
                headers: {
                    'content-type': 'application/json',
                },
            });
            const json = await response.json();
            if (json.success) {
                setSubscribed(true);
            }
            else {
                // eslint-disable-next-line no-alert
                alert('Something went wrong. Please try again later.');
            }
            setSubmitting(false);
        }
        catch (_a) {
            // eslint-disable-next-line no-alert
            alert('Something went wrong. Please try again later.');
        }
    }, [email]);
    return (_jsx("div", { children: _jsx("div", { className: "flex flex-col", children: _jsx("div", { className: 'w-full', children: _jsxs("div", { className: 'flex flex-col flex-1', children: [_jsx(SectionTitle, { children: "Newsletter" }), _jsxs("form", { onSubmit: handleSubmit, style: {
                                width: '100%',
                            }, children: [_jsxs("div", { className: 'fontbrand text-center mb-10 -mt-4', children: ["Read about new features and noteworthy updates we have made on Remotion once in a while.", ' '] }), _jsxs("div", { className: "flex flex-col md:flex-row gap-2 justify-center", children: [_jsx(Input, { disabled: submitting, value: email, className: "md:max-w-[400px]", onChange: (e) => setEmail(e.target.value), type: 'email', required: true, placeholder: "animator@gmail.com" }), _jsx("div", { children: _jsx(Button, { type: "submit", className: "w-14 rounded-full h-14 bg-brand text-white font-bold disabled:text-white/50 disabled:border-black px-0 py-0", disabled: submitting || subscribed, children: subscribed ? (_jsx(CheckIcon, { className: " size-5 mt-[1px]" })) : (_jsx(PlanePaperIcon, { className: " size-6 ml-[2px]" })) }) })] })] })] }) }) }) }));
};
