← back to Watches

src/components/PriceComparison.jsx

28 lines

import React from 'react';

const PriceComparison = ({ prices = [], watchRef }) => {
  const sorted = [...prices].sort((a, b) => a.price - b.price);
  const lowest = sorted[0]?.price;

  return (
    <div className="bg-white rounded-lg shadow p-4">
      <h3 className="font-semibold mb-3">Price Comparison</h3>
      <table className="w-full text-sm">
        <thead><tr className="border-b"><th className="text-left py-2">Dealer</th><th className="text-right">Price</th><th className="text-right">Condition</th><th></th></tr></thead>
        <tbody>
          {sorted.map((p, i) => (
            <tr key={i} className="border-b">
              <td className="py-2 flex items-center">{p.dealer}{p.price === lowest && <span className="ml-2 px-2 py-0.5 bg-green-100 text-green-700 text-xs rounded">Best</span>}</td>
              <td className="text-right font-medium">${p.price.toLocaleString()}</td>
              <td className="text-right text-gray-500">{p.condition}</td>
              <td className="text-right"><a href={p.url} target="_blank" rel="noopener" className="text-blue-600 hover:underline">View</a></td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default PriceComparison;