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

interface ContratoInfoProps {
  datos: PropuestaComercial;
  formatFecha: (fecha: string | undefined) => string;
  getTipoContratoLabel: (tipo: number) => string;
  getEstadoLabel: (estado: string) => { variant: string; label: string };
}

/**
 * Componente para mostrar la información general del contrato
 */
export const ContratoInfo: React.FC<ContratoInfoProps> = ({
  datos,
  formatFecha,
  getTipoContratoLabel,
  getEstadoLabel
}) => {
  const estadoInfo = getEstadoLabel(datos.EstProCom);

  return (
    <div className="mb-4">
      <h5 className="border-bottom pb-2">Información General</h5>
      <Row>
        <Col md={6}>
          <Table bordered responsive className="table-striped">
            <tbody>
              <tr>
                <th style={{ width: "40%" }}>Número de Referencia</th>
                <td>{datos.RefProCom}</td>
              </tr>
              <tr>
                <th>Fecha de Propuesta</th>
                <td>{formatFecha(datos.FecProCom)}</td>
              </tr>
              <tr>
                <th>Tipo de Contrato</th>
                <td>{getTipoContratoLabel(datos.TipProCom)}</td>
              </tr>
              <tr>
                <th>Estado</th>
                <td><Badge bg={estadoInfo.variant}>{estadoInfo.label}</Badge></td>
              </tr>
              {datos.ObsProCom && (
                <tr>
                  <th>Observaciones</th>
                  <td>{datos.ObsProCom}</td>
                </tr>
              )}
            </tbody>
          </Table>
        </Col>
      </Row>
    </div>
  );
};