import React from 'react';

interface RenderOneClientSelectionProps {
  item: any;
  isSelected: boolean;
  onClickHandler: (client: any) => void;
}

const renderOneClientSelection = ({
  item,
  isSelected,
  onClickHandler
}: RenderOneClientSelectionProps) => {
  return (
    <div 
      className={`w-full text-xs bg-white shadow rounded-lg overflow-hidden mb-2 transition-all ${isSelected ? 'border-2 border-amber-500' : ''} hover:shadow-md`}
      onClick={() => onClickHandler(item)}
    >
      <div className={`${isSelected ? 'bg-amber-100' : 'bg-gray-50'} p-2 hover:bg-amber-50 transition-all`}>
        <div className="flex items-center">
          <div className="mr-2">
            {item.logo ? (
              <img className="rounded border border-gray-200" src={item.logo} alt="Logo" width={40} height={40} />
            ) : (
              <div className="w-10 h-10 rounded bg-gray-200 flex items-center justify-center border border-gray-300">
                <div className="text-gray-500 text-sm font-bold">{item.name ? item.name.slice(0, 2).toUpperCase() : 'C'}</div>
              </div>
            )}
          </div>
          <div className="overflow-hidden">
            <h2 className="text-sm font-bold text-gray-800 truncate">{item.name || 'Client'}</h2>
            <p className="text-xs text-gray-500 truncate">{item.description || 'No description'}</p>
          </div>
          {isSelected && (
            <div className="ml-auto">
              <div className="bg-amber-500 rounded-full w-4 h-4 flex items-center justify-center">
                <svg xmlns="http://www.w3.org/2000/svg" className="h-3 w-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                </svg>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default renderOneClientSelection;