'use client';

import { useState } from 'react';

type CommentInputProps = {
  placeholder?: string;
  submitLabel?: string;
  onSubmit: (content: string) => Promise<void>;
  onCancel?: () => void;
};

export function CommentInput({
  placeholder = '写下你的评论…',
  submitLabel = '发布',
  onSubmit,
  onCancel,
}: CommentInputProps) {
  const [content, setContent] = useState('');
  const [busy, setBusy] = useState(false);

  const handleSubmit = async () => {
    const trimmed = content.trim();
    if (!trimmed || busy) return;
    setBusy(true);
    try {
      await onSubmit(trimmed);
      setContent('');
      onCancel?.();
    } finally {
      setBusy(false);
    }
  };

  return (
    <div className="space-y-3">
      <textarea
        value={content}
        onChange={(event) => setContent(event.target.value)}
        rows={3}
        placeholder={placeholder}
        className="w-full resize-none rounded-xl border border-[#d6d0c3] bg-white px-4 py-3 text-sm text-[#17221d] outline-none focus:border-[#2f6f57]"
      />
      <div className="flex justify-end gap-2">
        {onCancel ? (
          <button
            type="button"
            onClick={onCancel}
            className="rounded-full border border-[#d6d0c3] px-4 py-2 text-sm text-[#68716c]"
          >
            取消
          </button>
        ) : null}
        <button
          type="button"
          disabled={busy || !content.trim()}
          onClick={handleSubmit}
          className="rounded-full bg-[#2f6f57] px-5 py-2 text-sm font-semibold text-white disabled:opacity-50"
        >
          {busy ? '发送中…' : submitLabel}
        </button>
      </div>
    </div>
  );
}