← back to Watches

src/components/ArbitrageCalculator.jsx

33 lines

import React, { useState, useEffect } from 'react';

const ArbitrageCalculator = ({ usPrice }) => {
  const [jpyPrice, setJpyPrice] = useState('');
  const [rate, setRate] = useState(150);

  useEffect(() => { fetch('/api/exchange-rates/JPY').then(r => r.json()).then(d => d.rate && setRate(d.rate)); }, []);

  const jpyInUsd = jpyPrice ? (parseFloat(jpyPrice) / rate) : 0;
  const importDuty = jpyInUsd * 0.065;
  const shipping = 150;
  const totalCost = jpyInUsd + importDuty + shipping;
  const savings = usPrice - totalCost;

  return (
    <div className="bg-white rounded-lg shadow p-4">
      <h3 className="font-semibold mb-3">Japan Arbitrage Calculator</h3>
      <div className="space-y-3">
        <div><label className="text-sm text-gray-600">Japan Price (JPY)</label><input type="number" value={jpyPrice} onChange={e => setJpyPrice(e.target.value)} className="w-full px-3 py-2 border rounded" placeholder="500000" /></div>
        <div className="text-sm space-y-1">
          <p>USD Equivalent: <span className="font-medium">${jpyInUsd.toLocaleString(undefined, {maximumFractionDigits: 0})}</span></p>
          <p>Import Duty (6.5%): <span className="font-medium">${importDuty.toLocaleString(undefined, {maximumFractionDigits: 0})}</span></p>
          <p>Est. Shipping: <span className="font-medium">${shipping}</span></p>
          <p className="font-semibold border-t pt-1">Total: ${totalCost.toLocaleString(undefined, {maximumFractionDigits: 0})}</p>
        </div>
        {usPrice && <p className={`font-semibold ${savings > 0 ? 'text-green-600' : 'text-red-600'}`}>{savings > 0 ? `Savings: $${savings.toLocaleString(undefined, {maximumFractionDigits: 0})}` : `Loss: $${Math.abs(savings).toLocaleString(undefined, {maximumFractionDigits: 0})}`}</p>}
      </div>
    </div>
  );
};

export default ArbitrageCalculator;