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 project-detail');
  };

  return (
    <div className="app-container">
      <Header 
        title="Project Detail" 
        subtitle="Detailed project view"
      />

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

      <div className="card">
        <p>This is the Project Detail app.</p>
        <p>It integrates with Wrike's API to provide Detailed project view.</p>
      </div>
    </div>
  );
}
