import React from "react";

export default function ConnectionStatusCard() {
  return (
    <div className="wpgsa-card">
      <div className="wpgsa-card-header">
        <h3>Connection Status</h3>
      </div>

      <div className="wpgsa-card-body">
        <ul className="wpgsa-status-list">
          <li>
            <span>Sheet ID</span>
            <span className="wpgsa-status wpgsa-status-ok">
              ✓ Configured
            </span>
          </li>
          <li>
            <span>Secret Key</span>
            <span className="wpgsa-status wpgsa-status-ok">
              ✓ Active
            </span>
          </li>
          <li>
            <span>Last Successful Sync</span>
            <span className="wpgsa-muted">Never</span>
          </li>
        </ul>

        <div className="wpgsa-info-box">
          Status OK. Remember to enable two-way sync in the Sheet Add-on settings.
        </div>
      </div>
    </div>
  );
}