← snapshot

"use client";

import { statementStatus } from "@/lib/validate";

/**
 * A live mirror of `Statement::new`: trimmed, 1..=2000 characters. The
 * counter counts what the server will count; the server still re-validates.
 */
export function StatementTextarea({
  value,
  onChange,
  placeholder,
}: {
  value: string;
  onChange: (next: string) => void;
  placeholder?: string;
}) {
  const status = statementStatus(value);
  const touched = value.length > 0;
  const invalid = touched && !status.valid;

  return (
    <div>
      <textarea
        className="jac-textarea"
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={
          placeholder ??
          "A few sentences only a read can produce — what you traced, what you'd have picked, what would make you revisit."
        }
        aria-invalid={invalid}
        rows={5}
      />
      <div className="jac-hint" style={{ display: "flex", justifyContent: "space-between" }}>
        <span className={invalid ? "jac-hint--error" : undefined}>
          {invalid ? status.reason : "your verbatim words — stored exactly as written"}
        </span>
        <span className={`jac-counter${status.trimmedLength > 2000 ? " jac-counter--over" : ""}`}>
          {status.trimmedLength} / 2000
        </span>
      </div>
    </div>
  );
}

export { statementStatus };