'use client'

import { Check, AlertTriangle } from 'lucide-react'

export interface SeoCharCountProps {
  value: string
  /** Recommended minimum length (inclusive). */
  min: number
  /** Recommended/hard maximum length (inclusive). */
  max: number
}

/**
 * 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 }: SeoCharCountProps) {
  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 (
    <span className={`inline-flex items-center gap-1 text-xs ${tone}`}>
      {long ? (
        <AlertTriangle size={12} aria-hidden="true" />
      ) : good ? (
        <Check size={12} aria-hidden="true" />
      ) : null}
      {label}
    </span>
  )
}
