flyer-crawler.projectium.com/src/features/flyer/FlyerDisplay.tsx

// src/features/flyer/FlyerDisplay.tsx
import React from 'react';
import { formatDateRange } from '../../utils/dateUtils';
import type { Store } from '../../types';
import { ScanIcon } from '../../components/icons/ScanIcon';

export interface FlyerDisplayProps {
  imageUrl: string | null;
  store?: Store;
  validFrom?: string | null;
  validTo?: string | null;
  storeAddress?: string | null;
  onOpenCorrectionTool: () => void;
}

export const FlyerDisplay: React.FC<FlyerDisplayProps> = ({
  imageUrl,
  store,
  validFrom,
  validTo,
  storeAddress,
  onOpenCorrectionTool,
}) => {
  const dateRange = formatDateRange(validFrom, validTo, { verbose: true });

  // Determine the correct image source. If imageUrl is already a full URL (starts with http)
  // or is an absolute path (starts with /), use it directly. Otherwise, assume it's a relative
  // filename from the database and prepend the correct path.
  const imageSrc =
    imageUrl && (imageUrl.startsWith('http') || imageUrl.startsWith('/'))
      ? imageUrl
      : `/flyer-images/${imageUrl}`;

  return (
    <div className="w-full rounded-xl overflow-hidden border border-gray-200 dark:border-gray-700/50 shadow-md hover:shadow-lg transition-shadow duration-300 bg-white dark:bg-slate-800/50 flex flex-col backdrop-blur-sm">
      {(store || dateRange) && (
        <div className="p-3 border-b border-gray-200 dark:border-gray-700/50 bg-gray-50/80 dark:bg-slate-800/80 flex items-center space-x-4 pr-4">
          {store?.logo_url && (
            <img
              src={store.logo_url}
              alt={`${store.name || 'Store'} Logo`}
              className="h-12 w-12 object-contain rounded-md"
            />
          )}
          <div className="grow text-center sm:text-left min-w-0">
            {store?.name && (
              <h3 className="text-gray-900 dark:text-white text-lg font-bold tracking-wide">
                {store.name}
              </h3>
            )}
            {dateRange && (
              <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">{dateRange}</p>
            )}
            {storeAddress && (
              <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">{storeAddress}</p>
            )}
          </div>
          <button
            onClick={onOpenCorrectionTool}
            className="ml-auto shrink-0 flex items-center px-3 py-2 bg-yellow-500 text-white text-sm font-semibold rounded-md hover:bg-yellow-600 transition-colors"
            title="Manually correct flyer data"
          >
            <ScanIcon className="w-5 h-5 mr-2" />
            Correct Data
          </button>
        </div>
      )}
      <div className="bg-gray-100 dark:bg-gray-800">
        {imageUrl ? (
          <img
            src={imageSrc}
            alt="Grocery Flyer"
            className="w-full h-auto object-contain max-h-[60vh] dark:brightness-90 transition-all duration-300"
          />
        ) : (
          <div className="w-full h-64 bg-gray-200 dark:bg-gray-700 rounded-lg flex items-center justify-center">
            <p className="text-gray-500">Flyer image will be displayed here</p>
          </div>
        )}
      </div>
    </div>
  );
};