import { CampoTexto, CampoSelect } from '../components/Campos'
import SectionCard from '../components/SectionCard'
import { TIPOS_EMPLEO, TIPOS_ECONOMIA } from '../data/constantes'

interface Props {
  prefix: string
}

/** Campos de datos de empleo; reutilizable con prefijo (cliente y co-acreditado) */
export default function EmpleoCampos({ prefix }: Props) {
  const p = (campo: string) => `${prefix}${campo}`

  return (
    <SectionCard titulo="Datos de empleo">
      <CampoSelect nombre={p('tipoEmpleo')} etiqueta="Tipo de empleo" opciones={TIPOS_EMPLEO} />
      <CampoSelect nombre={p('tipoEconomia')} etiqueta="Tipo de economía" opciones={TIPOS_ECONOMIA} />
      <CampoTexto nombre={p('compania')} etiqueta="Compañía" />
      <CampoTexto nombre={p('antiguedadAnios')} etiqueta="Antigüedad (años)" />
      <CampoTexto nombre={p('antiguedadMeses')} etiqueta="Antigüedad (meses)" />
      <CampoTexto nombre={p('codigoPostal')} etiqueta="Código postal" />
      <CampoTexto nombre={p('direccion')} etiqueta="Dirección" className="sm:col-span-2" />
      <CampoTexto nombre={p('colonia')} etiqueta="Colonia" />
      <CampoTexto nombre={p('numero')} etiqueta="Número" />
      <CampoTexto nombre={p('puesto')} etiqueta="Puesto" />
      <CampoTexto nombre={p('telefono')} etiqueta="Teléfono" />
      <CampoTexto nombre={p('ext')} etiqueta="Ext." />
      <CampoTexto nombre={p('delegacion')} etiqueta="Delegación" />
    </SectionCard>
  )
}