import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { PayPalScriptProvider } from '@paypal/react-paypal-js';
import Payment from './pages/Payment.jsx';
import Success from './pages/Success.jsx';
import Cancel from './pages/Cancel.jsx';
import './App.css';

// PayPal configuration
const paypalOptions = {
    "client-id": import.meta.env.VITE_REACT_APP_PAYPAL_CLIENT_ID || "test",
    currency: "USD",
    intent: "capture",
};

function App() {
    return (
        <PayPalScriptProvider options={paypalOptions}>
            <Router>
                <div className="App">
                    <Routes>
                        <Route path="/" element={<Payment />} />
                        <Route path="/payment" element={<Payment />} />
                        <Route path="/success" element={<Success />} />
                        <Route path="/cancel" element={<Cancel />} />
                        <Route path="*" element={
                            <div className="container mt-5 text-center">
                                <h2>Page Not Found</h2>
                                <p>The requested page could not be found.</p>
                                <a href="/payment" className="btn btn-primary">Go to Payment</a>
                            </div>
                        } />
                    </Routes>
                </div>
            </Router>
        </PayPalScriptProvider>
    );
}

export default App;