src/App.jsx

import React, { useState } from 'react';
import axios from 'axios';
import ImageInput from './components/ImageInput';
import ResultsTable from './components/ResultsTable';

function App() {
  const [url, setUrl] = useState('');
  const [result, setResult] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const handleAnalyze = async () => {
    if (!url) return;

    setLoading(true);
    setError(null);
    setResult(null);

    try {
      const response = await axios.post('https://chandrap12330-vinm-base64.hf.space/analyze_shelf', {
        image_base64: url
      });
      setResult(response.data.markdown_output);
    } catch (err) {
      console.error(err);
      setError(err.response?.data?.detail?.[0]?.msg || 'Failed to analyze image. Please check the URL and try again.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="app-container">
      <h1>Kirana Shelf Analyzer</h1>

      <ImageInput
        onImageSelected={setUrl}
        onAnalyze={handleAnalyze}
        isLoading={loading}
        hasResult={!!result}
      />

      {error && (
        <div className="error-message">
          {error}
        </div>
      )}

      {result && (
        <>
          <div className="success-message">
            <span>✅</span> Image Analysis completed successfully
          </div>
          <ResultsTable data={result} />
        </>
      )}
    </div>
  );
}

export default App;