import React from 'react';
import { Client } from '../types';

interface ClientSearchProps {
  clients: Client[];
  loading?: boolean;
}

const ClientSearch: React.FC<ClientSearchProps> = ({ clients, loading = false }) => {
  if (loading) {
    return (
      <div className="container">
        <div className="text-center">
          <p>Carregando...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="container">
      <div className="card">
        <div className="card-header">
          <h5>Resultados da Busca ({clients.length} cliente{clients.length !== 1 ? 's' : ''} encontrado{clients.length !== 1 ? 's' : ''})</h5>
        </div>
        <div className="card-body">
          {clients.length === 0 ? (
            <div className="text-center py-4">
              <p className="text-muted">Nenhum cliente encontrado com os filtros aplicados.</p>
            </div>
          ) : (
            <div className="table-responsive">
              <table className="table table-striped">
                <thead>
                  <tr>
                    <th>Nome</th>
                    <th>Email</th>
                    <th>Telefone</th>
                    <th>Endereço</th>
                  </tr>
                </thead>
                <tbody>
                  {clients.map(client => (
                    <tr key={client.id}>
                      <td>
                        <strong>{client.name}</strong>
                      </td>
                      <td>
                        <a href={`mailto:${client.email}`} className="text-decoration-none">
                          {client.email}
                        </a>
                      </td>
                      <td>
                        <a href={`tel:${client.phone}`} className="text-decoration-none">
                          {client.phone}
                        </a>
                      </td>
                      <td>{client.address}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default ClientSearch;