'use client';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { prominentWordsFromText } from '../../lib/editor-seo-content.js';
export function SeoInsightsMetrics({ readability, plainText, }) {
    const prominent = prominentWordsFromText(plainText);
    const needsMoreCopy = readability.wordCount < 50;
    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("h4", { className: "mb-1.5 text-[12.5px] font-medium text-[var(--txt)]", children: "Prominent words" }), needsMoreCopy ? (_jsx("p", { className: "text-[11.5px] text-[var(--sub)]", children: "Once you add more copy, we'll list the words that occur most in the content \u2014 a quick read on what the page focuses on." })) : prominent.length > 0 ? (_jsx("div", { className: "flex flex-wrap gap-1.5", children: prominent.map((word) => (_jsx("span", { className: "rounded-full border border-[var(--bdr)] bg-[var(--card)] px-2 py-0.5 text-[11.5px] text-[var(--txt)]", children: word }, word))) })) : (_jsx("p", { className: "text-[11.5px] text-[var(--sub)]", children: "No recurring terms yet." }))] }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsx(MetricCard, { label: "Reading time", value: String(readability.readingTimeMinutes), unit: "minutes", hint: needsMoreCopy
                            ? 'Continue writing to estimate reading time.'
                            : `${readability.wordCount} words at ~200 wpm` }), _jsx(MetricCard, { label: "Word count", value: String(readability.wordCount), unit: "words", hint: needsMoreCopy ? 'Add body content to unlock metrics.' : undefined })] }), _jsxs("div", { className: "rounded-[7px] border border-[var(--bdr)] bg-[var(--card)] p-3", children: [_jsx("div", { className: "mb-1 text-[12.5px] font-medium text-[var(--txt)]", children: "Flesch reading ease" }), needsMoreCopy ? (_jsx("p", { className: "text-[11.5px] text-[var(--sub)]", children: "Your text should be slightly longer to calculate readability. Keep writing to unlock this score." })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "text-2xl font-medium text-[var(--acc)]", children: readability.fleschScore }), _jsx("span", { className: "text-[11.5px] text-[var(--muted)]", children: "out of 100" })] }), _jsxs("p", { className: "mt-1 text-[11.5px] text-[var(--sub)]", children: [readability.fleschLabel, " \u2014", ' ', readability.fleschScore >= 60
                                        ? 'Content is fairly easy to read.'
                                        : 'Try shorter sentences and simpler words.'] })] }))] })] }));
}
function MetricCard({ label, value, unit, hint, }) {
    return (_jsxs("div", { className: "rounded-[7px] border border-[var(--bdr)] bg-[var(--card)] p-3", children: [_jsx("div", { className: "text-[11.5px] font-medium text-[var(--sub)]", children: label }), _jsxs("div", { className: "mt-1 flex items-baseline gap-1", children: [_jsx("span", { className: "text-xl font-medium text-[var(--acc)]", children: value }), _jsx("span", { className: "text-[11px] text-[var(--muted)]", children: unit })] }), hint && _jsx("p", { className: "mt-1 text-[10.5px] text-[var(--muted)]", children: hint })] }));
}
//# sourceMappingURL=SeoInsightsMetrics.js.map