import React from 'react'
import { Star, Trash2, ChevronRight } from 'lucide-react'

interface FavoriteItem {
  id: string
  name: string
}

interface SidebarProps {
  favorites: FavoriteItem[]
  onSearch: (id: string, months: number) => void
  onToggleFavorite: (id: string) => void
  onViewFavorites: () => void
  months: number
}

export const Sidebar: React.FC<SidebarProps> = ({
  favorites,
  onSearch,
  onToggleFavorite,
  onViewFavorites,
  months,
}) => (
  <aside className="lg:col-span-1 space-y-4">
    <div className="bg-slate-900 border border-slate-800 rounded-xl p-4">
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-2">
          <Star className="text-yellow-500" size={16} fill="currentColor" />
          <h2 className="font-bold text-white text-sm">我的最愛</h2>
        </div>
        {favorites.length > 0 && (
          <button
            onClick={onViewFavorites}
            className="flex items-center gap-0.5 text-xs text-slate-500 hover:text-blue-400 transition-colors"
          >
            全部 <ChevronRight size={12} />
          </button>
        )}
      </div>

      {favorites.length === 0 ? (
        <p className="text-xs text-slate-600 italic">尚未加入任何股票</p>
      ) : (
        <div className="space-y-1">
          {favorites.map((fav) => (
            <div key={fav.id} className="flex items-center justify-between group py-1">
              <button
                onClick={() => onSearch(fav.id, months)}
                className="text-sm text-slate-300 hover:text-blue-400 transition-colors flex-1 text-left truncate"
              >
                <span className="font-mono font-bold mr-2 text-white">{fav.id}</span>
                <span className="text-xs text-slate-400">{fav.name}</span>
              </button>
              <button
                onClick={() => onToggleFavorite(fav.id)}
                className="opacity-0 group-hover:opacity-100 p-1 text-slate-600 hover:text-red-400 transition-all flex-shrink-0"
                title="移除"
              >
                <Trash2 size={13} />
              </button>
            </div>
          ))}

          <button
            onClick={onViewFavorites}
            className="w-full mt-2 pt-2 border-t border-slate-800 flex items-center justify-center gap-1 text-xs text-slate-500 hover:text-yellow-400 transition-colors py-1"
          >
            <Star size={11} />
            管理我的最愛
          </button>
        </div>
      )}
    </div>
  </aside>
)