import React, { useState, useEffect } from 'react';
import { useLocation } from '@docusaurus/router';
import styles from './styles.module.css';

const STORAGE_PREFIX = 'doc_feedback_';

export default function DocFeedback() {
  const location = useLocation();
  const [voted, setVoted] = useState(null);

  useEffect(() => {
    const stored = localStorage.getItem(STORAGE_PREFIX + location.pathname);
    if (stored) {
      setVoted(stored);
    }
  }, [location.pathname]);

  function handleVote(type) {
    if (voted) return;
    localStorage.setItem(STORAGE_PREFIX + location.pathname, type);
    setVoted(type);
  }

  return (
    <div className={styles.container}>
      <p className={styles.question}>这篇文档对您有帮助吗？</p>
      {voted ? (
        <p className={styles.thanks}>感谢您的反馈！</p>
      ) : (
        <div className={styles.buttons}>
          <button
            className={styles.btn}
            onClick={() => handleVote('yes')}
          >
            有帮助
          </button>
          <button
            className={`${styles.btn} ${styles.btnNo}`}
            onClick={() => handleVote('no')}
          >
            没帮助
          </button>
        </div>
      )}
    </div>
  );
}
