'use client';

import { Edit2, Trash2, Eye, EyeOff } from 'lucide-react';
import BrokerAvatar from './BrokerAvatar';
import StatusIndicator from './StatusIndicator';
import ToggleSwitch from '@/components/ui/ToggleSwitch';

export default function TableRow({ index,broker, onEdit, onDelete, onToggleStatus, onToggleVisibility, isHidden }) {
  if (isHidden) return null;

  return (
    <tr className={index%2!==0?"bg-gray-100 hover:bg-gray-50":"hover:bg-gray-50"}>
      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
        {broker.name}
      </td>
      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
        {broker.id}
      </td>
      <td className="px-6 py-4 whitespace-nowrap">
        <BrokerAvatar brokerName={broker.broker} />
      </td>
      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
        {broker.dateAdded}
      </td>
      <td className="px-6 py-4 whitespace-nowrap">
        <StatusIndicator status={broker.status} />
      </td>
      <td className="px-6 py-4 whitespace-nowrap text-sm text-green-500">
        {broker.balance}
      </td>
      <td className="px-6 py-4 whitespace-nowrap">
        <div className="flex items-center justify-center gap-2">
          <button 
            onClick={() => onToggleVisibility(broker.id)}
            className="p-1.5 hover:bg-gray-100 rounded text-gray-600" 
            title={isHidden ? "Show" : "Hide"}
          >
            {isHidden ? <EyeOff size={18} /> : <Eye size={18} />}
          </button>
          <button 
            onClick={() => onEdit(broker)}
            className="p-1.5 hover:bg-gray-100 rounded text-gray-600"
            title="Edit"
          >
            <Edit2 size={18} />
          </button>
          <button 
            onClick={() => onDelete(broker.id)}
            className="p-1.5 hover:bg-gray-100 rounded text-gray-600"
            title="Delete"
          >
            <Trash2 size={18} />
          </button>
        </div>
      </td>
      <td className="px-6 py-4 whitespace-nowrap text-center">
        <ToggleSwitch 
          isActive={broker.status === 'active'} 
          onToggle={() => onToggleStatus(broker.id)} 
        />
      </td>
    </tr>
  );
}