import { Button } from "@/components/ui/button";
// import { Activity, TrendingDown, TrendingUp } from "lucide-react";
import { cn } from "@/lib/utils";
import type { DashboardStockSearchItem } from "@/features/trade/types/trade.types";

interface StockSearchResultsProps {
  items: DashboardStockSearchItem[];
  onSelect: (item: DashboardStockSearchItem) => void;
  selectedSymbol?: string;
}

export function StockSearchResults({
  items,
  onSelect,
  selectedSymbol,
}: StockSearchResultsProps) {
  if (items.length === 0) return null;

  return (
    <div className="flex flex-col p-2">
      {items.map((item) => {
        const isSelected = item.symbol === selectedSymbol;
        return (
          <Button
            key={item.symbol}
            variant="outline"
            className={cn(
              "h-auto w-full flex-col items-start gap-1 p-3 text-left",
              isSelected && "border-brand-500 bg-brand-50 hover:bg-brand-100",
            )}
            onClick={() => onSelect(item)}
          >
            <div className="flex w-full items-center justify-between gap-2">
              <span className="font-semibold truncate">{item.name}</span>
              <span className="text-xs text-muted-foreground shrink-0">
                {item.symbol}
              </span>
            </div>
            <div className="flex items-center gap-1 text-xs text-muted-foreground">
              {item.market}
            </div>
          </Button>
        );
      })}
    </div>
  );
}