import React from 'react';
import { Company } from '../../types/financial';
import { TrendingUp, TrendingDown } from 'lucide-react';

interface CompanyListProps {
  companies: Company[];
  onCompanyClick: (symbol: string) => void;
}

export const CompanyList: React.FC<CompanyListProps> = ({ companies, onCompanyClick }) => {
  return (
    <div className="space-y-2">
      <h4 className="text-[10px] font-mono uppercase tracking-wider text-term-text-tertiary px-1">
        Latest Companies
      </h4>

      <div className="space-y-0.5">
        {companies.map((company) => {
          const isPositive = company.change >= 0;

          return (
            <button
              key={company.symbol}
              onClick={() => onCompanyClick(company.symbol)}
              className="w-full text-left px-2 py-2 border-l-2 border-transparent hover:border-info hover:bg-term-highlight transition-all group"
            >
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2 min-w-0 flex-1">
                  <span className="font-mono font-bold text-sm text-term-text group-hover:text-info transition-colors">
                    {company.symbol}
                  </span>
                  <span className="text-[10px] text-term-text-tertiary truncate">
                    {company.name}
                  </span>
                </div>
                <div className="flex items-center gap-2 flex-shrink-0 ml-2">
                  <span className={`text-xs font-mono ${isPositive ? 'text-positive' : 'text-negative'}`}>
                    {isPositive ? '+' : ''}{company.changePercent.toFixed(2)}%
                  </span>
                  {isPositive ? (
                    <TrendingUp className="h-3 w-3 text-positive" />
                  ) : (
                    <TrendingDown className="h-3 w-3 text-negative" />
                  )}
                </div>
              </div>
              <div className="flex items-center justify-between mt-1">
                <span className="text-xs font-mono text-term-text">
                  ${company.price.toFixed(2)}
                </span>
                <span className="text-[10px] text-term-text-muted">
                  Vol: {company.volume?.toLocaleString() ?? 'N/A'}
                </span>
              </div>
            </button>
          );
        })}
      </div>
    </div>
  );
};
