import React, { useState } from 'react';
import './CommentForm.css';

const CommentForm = ({ onSubmit, onCancel }) => {
  const [content, setContent] = useState('');
  const [isFocused, setIsFocused] = useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (content.trim()) {
      onSubmit(content);
      setContent('');
    }
  };

  return (
    <div className="comment-form-container">
      <form className="comment-form" onSubmit={handleSubmit}>
        <div className={`form-group ${isFocused ? 'focused' : ''}`}>
          <textarea
            className="comment-input"
            placeholder="分享你的想法..."
            value={content}
            onChange={(e) => setContent(e.target.value)}
            onFocus={() => setIsFocused(true)}
            onBlur={() => setIsFocused(false)}
            required
          />
          <div className="floating-label">添加评论</div>
        </div>
        
        <div className="form-actions">
          <button 
            type="button" 
            className="cancel-button"
            onClick={onCancel}
          >
            取消
          </button>
          <button 
            type="submit" 
            className="submit-button"
            disabled={!content.trim()}
          >
            发布评论
          </button>
        </div>
      </form>
    </div>
  );
};

export default CommentForm;