← back to Watches

src/components/PriceIndicator.jsx

49 lines

import React from 'react';

const PriceIndicator = ({ price, priceRange, confidence, lastUpdated, currency = 'USD' }) => {
  const formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency, maximumFractionDigits: 0 });

  const getConfidenceColor = (conf) => {
    if (conf === 'high') return 'bg-green-100 text-green-800';
    if (conf === 'medium') return 'bg-yellow-100 text-yellow-800';
    return 'bg-gray-100 text-gray-600';
  };

  const getFreshnessText = (date) => {
    if (!date) return 'Unknown';
    const hours = Math.floor((Date.now() - new Date(date).getTime()) / (60 * 60 * 1000));
    if (hours < 1) return 'Just now';
    if (hours < 24) return `${hours}h ago`;
    const days = Math.floor(hours / 24);
    return `${days}d ago`;
  };

  return (
    <div className="bg-white rounded-lg p-3 border border-gray-200 shadow-sm">
      <div className="flex items-center justify-between mb-2">
        <span className="text-xs font-medium text-gray-500 uppercase tracking-wide">Market Price</span>
        <span className={`text-xs px-2 py-0.5 rounded-full font-medium ${getConfidenceColor(confidence)}`}>
          {confidence || 'unknown'} confidence
        </span>
      </div>

      <div className="text-2xl font-bold text-gray-900">
        {price ? formatter.format(price) : 'N/A'}
      </div>

      {priceRange && (
        <div className="text-sm text-gray-500 mt-1">
          Range: {formatter.format(priceRange.min)} - {formatter.format(priceRange.max)}
        </div>
      )}

      <div className="flex items-center justify-between mt-2 pt-2 border-t border-gray-100">
        <span className="text-xs text-gray-400">Updated {getFreshnessText(lastUpdated)}</span>
        <button className="text-xs text-blue-600 hover:text-blue-700 font-medium">Details</button>
      </div>
    </div>
  );
};

export default PriceIndicator;