'use client';

import { useState } from 'react';
import { Field } from '@/components/ui/field';

interface BoardContentFieldProps {
  name: string;
  label: string;
  defaultValue?: string;
  maxLength: number;
  placeholder?: string;
}

/**
 * 본문/답변 입력 — 글자수 카운트가 붙은 textarea(시안의 "50/1000자" 표기).
 *
 * 시안은 리치 텍스트 에디터(굵게·기울임·링크·목록)지만, 사용자 확인 결과 **이번 범위는 로직만**
 * 이라 일반 textarea로 구현했다. 에디터 라이브러리 도입은 별도 협의 대상이다 — 도입하더라도
 * 값이 `name`으로 제출되는 계약만 지키면 이 컴포넌트만 교체하면 된다.
 *
 * 상한 초과는 `maxLength` 속성으로 입력 단계에서 막지만, 최종 판정은 Server Action의 검증이다
 * (화면 속성은 신뢰 경계가 아니다).
 */
export function BoardContentField({
  name,
  label,
  defaultValue = '',
  maxLength,
  placeholder,
}: BoardContentFieldProps) {
  const [length, setLength] = useState(defaultValue.length);

  return (
    <Field label={label}>
      <textarea
        name={name}
        defaultValue={defaultValue}
        maxLength={maxLength}
        placeholder={placeholder}
        rows={6}
        onChange={(event) => setLength(event.target.value.length)}
        className="w-full rounded-md border border-border bg-surface px-3 py-2 text-body-md text-foreground placeholder:text-foreground-subtle focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
      />
      <p className="text-right text-body-sm text-foreground-muted">
        {length}/{maxLength}자
      </p>
    </Field>
  );
}