import React from 'react';
import { Company } from '../../types/financial';

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-[#888888] px-1">
        Latest Companies
      </h4>

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

          return (
            <button
              key={company.symbol}
              onClick={() => onCompanyClick(company.symbol)}
              className="w-full bg-[#111111] hover:bg-[#1a1a1a] border border-[#2a2a2a] hover:border-[#3a3a3a] rounded p-2.5 text-left transition-all group"
            >
              <div className="flex items-center justify-between mb-1">
                <span className="font-mono font-bold text-sm text-[#e0e0e0] group-hover:text-[#58a6ff] transition-colors">
                  {company.symbol}
                </span>
                <span className={`text-xs font-mono ${isPositive ? 'text-[#00d26a]' : 'text-[#ff4757]'}`}>
                  {isPositive ? '+' : ''}{company.changePercent.toFixed(2)}%
                </span>
              </div>

              <div className="flex items-center justify-between">
                <span className="text-[10px] text-[#888888] truncate flex-1 mr-2">{company.name}</span>
                <span className="text-xs font-mono text-[#e0e0e0]">${company.price.toFixed(2)}</span>
              </div>
            </button>
          );
        })}
      </div>
    </div>
  );
};
