import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from 'react';
import { SolutionIcon } from './SolutionIcon';
const CopyField = ({ label, value, color, }) => {
    const [copied, setCopied] = useState(false);
    const copy = async () => {
        try {
            await navigator.clipboard.writeText(value);
        }
        catch {
            // fallback
            const ta = document.createElement('textarea');
            ta.value = value;
            document.body.appendChild(ta);
            ta.select();
            try {
                document.execCommand('copy');
            }
            catch { /* noop */ }
            document.body.removeChild(ta);
        }
        setCopied(true);
        setTimeout(() => setCopied(false), 2000);
    };
    return (_jsxs("div", { className: "login-field", children: [_jsx("span", { className: "login-field-label", children: label }), _jsx("code", { className: "login-field-value", children: value }), _jsx("button", { className: "login-copy-btn", onClick: copy, title: "\uBCF5\uC0AC", style: { color }, children: copied ? (_jsx("span", { className: "login-copied", children: "\uBCF5\uC0AC\uB428!" })) : (_jsx(SolutionIcon, { slug: "copy", size: 16 })) })] }));
};
export const LoginBox = ({ access, color, soon }) => {
    return (_jsxs("div", { className: "login-box", style: { borderColor: `${color}40`, boxShadow: `0 0 32px ${color}18` }, children: [_jsxs("div", { className: "login-box-head", children: [_jsx("span", { className: "login-box-title", children: "\uC811\uC18D \uC815\uBCF4" }), soon && _jsx("span", { className: "badge badge-soon", children: "\uBC30\uD3EC \uC608\uC815" })] }), !soon && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "login-field", children: [_jsx("span", { className: "login-field-label", children: "URL" }), _jsxs("a", { className: "login-url", href: access.url, target: "_blank", rel: "noreferrer", children: [access.url, _jsx(SolutionIcon, { slug: "external-link", size: 14 })] })] }), access.httpsUrl && (_jsxs("div", { className: "login-field", children: [_jsx("span", { className: "login-field-label", children: "HTTPS" }), _jsxs("a", { className: "login-url", href: access.httpsUrl, target: "_blank", rel: "noreferrer", children: [access.httpsUrl, _jsx(SolutionIcon, { slug: "external-link", size: 14 })] })] })), _jsx(CopyField, { label: "ID", value: access.id, color: color }), _jsx(CopyField, { label: "PW", value: access.pw, color: color })] })), soon && (_jsx("p", { className: "login-soon-text", children: "\uBCF8 \uC194\uB8E8\uC158\uC740 \uD604\uC7AC \uC900\uBE44 \uC911\uC785\uB2C8\uB2E4. \uBC30\uD3EC \uD6C4 \uC811\uC18D \uC815\uBCF4\uAC00 \uC81C\uACF5\uB429\uB2C8\uB2E4." }))] }));
};
export default LoginBox;
