"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import { Button } from "../components/ui/button";
export function EmailEntry({ onSubmit, error }) {
    const [email, setEmail] = useState("");
    const [isSubmitting, setIsSubmitting] = useState(false);
    const [validationError, setValidationError] = useState();
    const handleSubmit = async (e) => {
        e.preventDefault();
        setValidationError(undefined);
        // Basic validation
        if (!email.trim()) {
            setValidationError("Email address is required");
            return;
        }
        if (!email.includes("@") || !email.includes(".")) {
            setValidationError("Please enter a valid email address");
            return;
        }
        setIsSubmitting(true);
        try {
            await onSubmit(email.trim());
        }
        finally {
            setIsSubmitting(false);
        }
    };
    return (_jsxs("div", { className: "w-full max-w-md", children: [_jsx("h2", { className: "text-neutral-grey-100 text-center text-3xl font-bold tracking-tight", children: "Activate Your License" }), _jsx("p", { className: "text-neutral-grey-50 mt-3 text-center leading-relaxed", children: "Enter your email address to get started." }), _jsxs("form", { onSubmit: handleSubmit, className: "mt-6 space-y-4", children: [_jsxs("div", { children: [_jsx("label", { htmlFor: "email", className: "text-neutral-grey-50 block text-sm font-medium", children: "Email Address" }), _jsx("input", { type: "email", id: "email", "data-testid": "license-email-input", value: email, onChange: (e) => setEmail(e.target.value), className: "border-border-default text-neutral-grey-100 focus:ring-feedback-blue/30 mt-1 block h-11 w-full rounded-xl border bg-white px-4 py-3 placeholder-gray-400 focus:ring-2 focus:outline-none", placeholder: "you@company.com", required: true, disabled: isSubmitting, autoFocus: true })] }), (error || validationError) && (_jsx("div", { className: "border-feedback-red bg-feedback-red-light text-feedback-red rounded-xl border p-3 text-sm", children: validationError || error })), _jsx(Button, { type: "submit", size: "lg", disabled: isSubmitting, className: "w-full", children: isSubmitting ? (_jsxs("span", { className: "flex items-center justify-center gap-2", children: [_jsxs("svg", { className: "h-5 w-5 animate-spin", viewBox: "0 0 24 24", fill: "none", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }), "Checking..."] })) : ("Continue") })] }), _jsxs("p", { className: "text-neutral-grey-50 mt-6 text-center text-xs", children: ["By continuing, you agree to our", " ", _jsx("a", { href: "#", className: "text-feedback-blue hover:underline", children: "Terms of Service" }), " ", "and", " ", _jsx("a", { href: "#", className: "text-feedback-blue hover:underline", children: "Privacy Policy" })] })] }));
}
//# sourceMappingURL=EmailEntry.js.map