← back to Watches

src/components/PricePrediction.jsx

34 lines

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

const PricePrediction = ({ watchId }) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(`/api/predictions/${watchId}`).then(r => r.json()).then(d => d.success && setData(d));
  }, [watchId]);

  if (!data) return null;

  const getConfidenceColor = (c) => c === 'high' ? 'text-green-600' : c === 'medium' ? 'text-yellow-600' : 'text-gray-500';

  return (
    <div className="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg p-4">
      <div className="flex items-center justify-between mb-3">
        <h3 className="font-semibold">Price Predictions</h3>
        <span className={`text-sm ${getConfidenceColor(data.confidence)}`}>{data.confidence} confidence</span>
      </div>
      <div className="grid grid-cols-3 gap-4 mb-3">
        {data.predictions.map(p => (
          <div key={p.year} className="text-center">
            <div className="text-2xl font-bold">${(p.price / 1000).toFixed(1)}k</div>
            <div className="text-sm text-gray-500">{p.year}</div>
          </div>
        ))}
      </div>
      <p className="text-xs text-gray-500 italic">{data.disclaimer}</p>
    </div>
  );
};

export default PricePrediction;