import { useState } from "react";
import { useTranslation } from 'react-i18next';
import StarRating from "./StarRating";

export default function ReviewForm({ onSubmit, submitting }) {
  const { t } = useTranslation();
  const [rating, setRating] = useState(0);
  const [text, setText] = useState("");
  const [error, setError] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    if (rating === 0) {
      setError(t('reviews.ratePrompt'));
      return;
    }
    setError("");
    onSubmit({ rating, text: text.trim() });
    setRating(0);
    setText("");
  };

  return (
      <form className="rv-form" onSubmit={handleSubmit}>
        <h3 className="rv-form-title">{t('reviews.leaveReview')}</h3>
        <div className="rv-form-rating">
          <span className="rv-form-label">{t('reviews.rating')}</span>
          <StarRating value={rating} onChange={setRating} size={32} />
        </div>
        {error && <div className="rv-form-error">{error}</div>}
        <textarea
            className="rv-form-textarea"
            placeholder={t('reviews.reviewPlaceholder')}
            value={text}
            onChange={(e) => setText(e.target.value)}
            maxLength={500}
            rows={4}
        />
        <div className="rv-form-footer">
          <span className="rv-form-counter">{text.length}/500</span>
          <button className="rv-form-submit" type="submit" disabled={submitting}>
            {submitting ? t('reviews.sending') : t('reviews.send')}
          </button>
        </div>
      </form>
  );
}