import React from 'react';
import { ImageItem } from '../types';
import { Clock } from 'lucide-react';

interface HistoryBarProps {
  images: ImageItem[];
  onSelect: (image: ImageItem) => void;
}

const HistoryBar: React.FC<HistoryBarProps> = ({ images, onSelect }) => {
  if (images.length === 0) return null;

  return (
    <div className="fixed bottom-24 left-6 z-40 max-w-[calc(100vw-48px)] md:max-w-xs animate-fade-in pointer-events-auto">
      <div className="flex items-center gap-2 mb-2 px-1">
        <Clock size={14} className="text-gray-400" />
        <span className="text-[10px] font-bold text-gray-400 uppercase tracking-widest">我的生成记录</span>
      </div>
      <div className="flex gap-2 overflow-x-auto no-scrollbar pb-2 mask-linear-right">
        {images.map((img) => (
          <button
            key={img.id}
            onClick={() => onSelect(img)}
            className="flex-shrink-0 w-16 h-16 rounded-lg overflow-hidden border-2 border-white dark:border-gray-800 shadow-sm hover:scale-105 hover:border-purple-400 transition-all"
          >
            <img 
              src={img.url} 
              alt="History" 
              className="w-full h-full object-cover"
              loading="lazy" 
            />
          </button>
        ))}
      </div>
    </div>
  );
};

export default HistoryBar;