import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { ClearHistoryModal } from './ClearHistoryModal';

export function DataSection() {
  const [showClearModal, setShowClearModal] = useState(false);
  const navigate = useNavigate();

  return (
    <div className="data-section">
      <div className="section-block">
        <h3>Очистка данных</h3>
        <p className="section-desc">
          Очистить историю операций (все транзакции). Счета, категории и
          правила сохранятся.
        </p>
        <button
          type="button"
          className="btn btn-danger"
          onClick={() => setShowClearModal(true)}
        >
          Очистить историю
        </button>
      </div>

      {showClearModal && (
        <ClearHistoryModal
          onClose={() => setShowClearModal(false)}
          onDone={() => {
            setShowClearModal(false);
            navigate('/history');
          }}
        />
      )}
    </div>
  );
}