'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Check, AlertTriangle } from 'lucide-react';
/**
 * A length counter with an accessible quality band for SEO fields. Color is
 * always paired with an icon + label so meaning is never conveyed by color
 * alone (WCAG). "Good" = within [min, max]; "long" (over max) is the only
 * destructive state; below min is a neutral hint.
 */
export function SeoCharCount({ value, min, max }) {
    const len = value.trim().length;
    const empty = len === 0;
    const long = len > max;
    const good = !empty && len >= min && len <= max;
    const tone = long ? 'text-destructive' : 'text-muted-foreground';
    const label = empty
        ? `0/${max}`
        : long
            ? `${len}/${max} · too long`
            : good
                ? `${len}/${max} · good`
                : `${len}/${max} · aim for ${min}–${max}`;
    return (_jsxs("span", { className: `inline-flex items-center gap-1 text-xs ${tone}`, children: [long ? (_jsx(AlertTriangle, { size: 12, "aria-hidden": "true" })) : good ? (_jsx(Check, { size: 12, "aria-hidden": "true" })) : null, label] }));
}
//# sourceMappingURL=SeoCharCount.js.map