import React, { useMemo } from 'react';
import type { FlyerItem } from '../types';
import { TrophyIcon } from './icons/TrophyIcon';

interface TopDealsProps {
  items: FlyerItem[];
}

export const TopDeals: React.FC<TopDealsProps> = ({ items }) => {
    
  const topDeals = useMemo(() => {
    return [...items]
      .filter(item => item.price_in_cents !== null) // Only include items with a parseable price
      .sort((a, b) => (a.price_in_cents ?? Infinity) - (b.price_in_cents ?? Infinity))
      .slice(0, 10);
  }, [items]);

  if (topDeals.length === 0) {
    return null;
  }

  return (
    <div className="bg-brand-light dark:bg-brand-dark/20 border border-brand-primary/50 rounded-lg p-4">
      <h3 className="text-lg font-bold text-brand-dark dark:text-brand-light flex items-center mb-3">
        <TrophyIcon className="w-6 h-6 mr-2" />
        Top 10 Deals Across All Flyers
      </h3>
      <ul className="space-y-2">
        {topDeals.map((item, index) => (
          <li key={index} className="grid grid-cols-3 gap-2 items-center text-sm bg-white dark:bg-gray-800 p-2 rounded">
            <span className="font-semibold text-gray-800 dark:text-gray-200 col-span-2 truncate">{item.item}</span>
            <span className="font-bold text-brand-primary text-right">{item.price_display}</span>
            <span className="text-xs text-gray-500 dark:text-gray-400 col-span-3 truncate italic">
              (Qty: {item.quantity})
            </span>
          </li>
        ))}
      </ul>
    </div>
  );
};