import React from 'react';
import { SearchHistoryItem } from './useSearchHistory';

interface SearchHistoryDropdownProps {
  items: SearchHistoryItem[];
  onSelect: (item: SearchHistoryItem) => void;
  onDelete: (e: React.MouseEvent, value: string) => void;
  className?: string;
  itemClassName?: string;
  titleClassName?: string;
  addressClassName?: string;
}

const SearchHistoryDropdown: React.FC<SearchHistoryDropdownProps> = ({
  items,
  onSelect,
  onDelete,
  className = 'url-input-autocomplete-dropdown',
  itemClassName = 'url-input-autocomplete-item',
  titleClassName = 'url-input-autocomplete-title',
  addressClassName = 'url-input-autocomplete-address',
}) => {
  if (items.length === 0) return null;

  return (
    <div className={className}>
      {items.map((item, index) => (
        <div
          key={index}
          className={itemClassName}
          style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}
        >
          <button
            type="button"
            style={{ flex: 1, textAlign: 'left', background: 'none', border: 'none', padding: 0, cursor: 'pointer' }}
            onMouseDown={(e) => { e.preventDefault(); onSelect(item); }}
          >
            <div className={titleClassName}>{item.value}</div>
            {item.roadAddress && (
              <div className={addressClassName}>{item.roadAddress}</div>
            )}
          </button>
          <button
            type="button"
            onMouseDown={(e) => onDelete(e, item.value)}
            style={{ color:'#737983', background: 'none', border: 'none', cursor: 'pointer', padding: '0 4px', opacity: 0.8, flexShrink: 0 }}
          >
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3">
              <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
            </svg>
          </button>
        </div>
      ))}
    </div>
  );
};

export default SearchHistoryDropdown;