import React from 'react';
import { Row, Col, Table } from 'react-bootstrap';
import { Cliente } from '../../Interfaces/Interfaces';

interface ClienteInfoProps {
  clienteData: Cliente;
}

/**
 * Componente para mostrar información del cliente y contacto
 */
export const ClienteInfo: React.FC<ClienteInfoProps> = ({ clienteData }) => {
  console.log('clienteData en ClienteInfo:', clienteData);
  return (
    <div className="mb-4">
      <Row>
        <Col md={6}>
          <h6 className="fw-bold">Información del Cliente</h6>
          <Table bordered responsive className="table-striped">
            <tbody>
              <tr>
                <th style={{ width: "40%" }}>Razón Social</th>
                <td>{clienteData.BloDomFis?? 'N/A'}</td>
              </tr>
              <tr>
                <th>NIF/CIF</th>
                <td>{clienteData?.NumCifCli ?? 'N/A'}</td>
              </tr>
              <tr>
                <th>Dirección</th>
                <td>
                  {clienteData?.NomViaDomSoc ?? ''} {clienteData?.NumViaDomSoc ?? ''}
                </td>
              </tr>
              <tr>
                <th>Código Postal</th>
                <td>{clienteData?.CPLocSoc ?? 'N/A'}</td>
              </tr>
              <tr>
                <th>Teléfono</th>
                <td>
                  {clienteData.TelFijCli || clienteData.TelMovCli || 'N/A'}
                </td>
              </tr>
              <tr>
                <th>Email</th>
                <td>{clienteData?.EmaCli || 'N/A'}</td>
              </tr>
            </tbody>
          </Table>
        </Col>
        <Col md={6}>
          <h6 className="fw-bold mt-3 mt-md-0">Información de Contacto</h6>
          {clienteData.contacto_detalle_cliente ? (
            <Table bordered responsive className="table-striped">
              <tbody>
                <tr>
                  <th style={{ width: "40%" }}>Nombre</th>
                  <td>{clienteData.contacto_detalle_cliente?.contacto?.NomConCli}</td>
                </tr>
                <tr>
                  <th>NIF</th>
                  <td>{clienteData.contacto_detalle_cliente?.contacto?.NIFConCli}</td>
                </tr>
                <tr>
                  <th>Teléfono</th>
                  <td>
                    {clienteData.contacto_detalle_cliente?.contacto?.TelFijConCli || clienteData.contacto_detalle_cliente?.contacto?.TelCelConCli || 'N/A'}
                  </td>
                </tr>
                <tr>
                  <th>Email</th>
                  <td>{clienteData.contacto_detalle_cliente?.contacto?.EmaConCli || 'N/A'}</td>
                </tr>
                <tr>
                  <th>Cargo</th>
                  <td>{clienteData.contacto_detalle_cliente?.contacto?.CarConCli || 'N/A'}</td>
                </tr>
              </tbody>
            </Table>
          ) : (
            <p>No hay información de contacto disponible</p>
          )}
        </Col>
      </Row>
    </div>
  );
};