import React, { useState, useEffect } from 'react';
import { Header } from '../../components/Header';
import { useCallTool } from '../../hooks/useCallTool';
import '../../styles/global.css';

export function App() {
  const [data, setData] = useState<any>(null);
  const { callTool, loading, error } = useCallTool();

  useEffect(() => {
    loadData();
  }, []);

  const loadData = async () => {
    // Call appropriate Wrike API tool
    console.log('Loading data for custom-fields-manager');
  };

  return (
    <div className="app-container">
      <Header 
        title="Custom Fields Manager" 
        subtitle="Manage custom fields"
      />

      {loading && <div className="loading">Loading...</div>}
      {error && <div className="error">{error}</div>}

      <div className="card">
        <p>This is the Custom Fields Manager app.</p>
        <p>It integrates with Wrike's API to provide Manage custom fields.</p>
      </div>
    </div>
  );
}
