personal-site/pages/rates.js

import { useEffect, useState } from "react";
import Layout from "../components/Layout";
import RateCard from "../components/RateCard";
import Icon from "../components/Icon";
import { fetchData } from "../utils/api";

export default function Rates() {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchDataFromApi = async () => {
            try {
                const apiData = await fetchData();
                setData(apiData);
                setError(null);
            } catch (error) {
                console.error("Error fetching data:", error);
                setError("Failed to load exchange rates. Please try again later.");
            } finally {
                setLoading(false);
            }
        };

        fetchDataFromApi();
    }, []);

    const formatCurrency = (value) => {
        return new Intl.NumberFormat("en-NG", {
            style: "currency",
            currency: "NGN",
        }).format(value);
    };

    const getBestRate = () => {
        if (!data || data.length === 0) return null;
        return Math.max(...data.map(item => item.rate));
    };

    const bestRate = getBestRate();

    const sortedData = data ? [...data].sort((a, b) => {
        const aIsBest = a.bestRate || a.rate === bestRate;
        const bIsBest = b.bestRate || b.rate === bestRate;
        if (aIsBest && !bIsBest) return -1;
        if (!aIsBest && bIsBest) return 1;
        return b.rate - a.rate;
    }) : null;

    return (
        <Layout
            title="EUR → NGN Exchange Rates · Jesse Egbosionu"
            description="Compare live EUR to NGN exchange rates across multiple providers."
        >
            <section className="section rates-section">
                <div className="shell">
                    <div className="rates-header">
                        <div className="section-heading">
                            <p className="eyebrow">
                                <span className="live-dot" />
                                Live tool
                            </p>
                            <h1 className="section-title">Exchange rates</h1>
                            <p className="section-lead">
                                Compare live EUR → NGN rates across remittance providers, fetched in real time.
                            </p>
                        </div>

                        <div className="currency-badge">
                            <span>€1 EUR</span>
                            <Icon name="arrowRight" size={16} />
                            <span>NGN</span>
                        </div>
                    </div>

                    {loading && (
                        <div className="rates-grid">
                            {[...Array(6)].map((_, index) => (
                                <div key={index} className="rate-card skeleton">
                                    <div className="skeleton-line skeleton-header"></div>
                                    <div className="skeleton-line skeleton-rate"></div>
                                    <div className="skeleton-line skeleton-badge"></div>
                                </div>
                            ))}
                        </div>
                    )}

                    {error && (
                        <div className="state-card">
                            <h3 className="state-title">Unable to load rates</h3>
                            <p className="state-message">{error}</p>
                            <button
                                onClick={() => window.location.reload()}
                                className="button button-primary"
                            >
                                Try again
                            </button>
                        </div>
                    )}

                    {!loading && !error && sortedData && sortedData.length > 0 && (
                        <>
                            <div className="rates-grid">
                                {sortedData.map((item, index) => (
                                    <RateCard
                                        key={item.provider}
                                        provider={item.provider}
                                        rate={item.rate}
                                        href={item.href}
                                        isBest={item.bestRate || item.rate === bestRate}
                                        index={index}
                                        formatCurrency={formatCurrency}
                                        logo={item.logo}
                                    />
                                ))}
                            </div>

                            <div className="rates-info">
                                <p>Rates are fetched live on each visit. Click a provider to visit their website.</p>
                                <p className="rates-timestamp">
                                    Last updated {new Date().toLocaleString('en-GB', {
                                        dateStyle: 'medium',
                                        timeStyle: 'short'
                                    })}
                                </p>
                            </div>
                        </>
                    )}

                    {!loading && !error && (!data || data.length === 0) && (
                        <div className="state-card">
                            <h3 className="state-title">No rates available</h3>
                            <p className="state-message">
                                We couldn't find any exchange rates at the moment.
                            </p>
                        </div>
                    )}
                </div>
            </section>
        </Layout>
    );
}