import { Link, useParams } from 'react-router';
import { Icon } from '../components/Icon';
import { InspectionVisitEditorF4Page } from './InspectionVisitEditorF4Page';

/**
 * F6.1 keeps Preparación para campo as a stage of the Inspection. The existing
 * detail remains unchanged underneath; this wrapper makes the relationship
 * explicit without creating a second operational module.
 */
export function InspectionVisitDetailF61Page() {
  const { id } = useParams<{ id: string }>();

  return <>
    {id && <article className="panel survey-status-actions no-print">
      <div>
        <span className="eyebrow">ETAPA PREVIA AL CAMPO</span>
        <strong>Preparación para campo</strong>
        <p>Revisá antecedentes, hallazgos pendientes y próximos controles de esta Inspección antes de iniciarla desde la APK.</p>
      </div>
      <div className="form-actions">
        <Link className="button secondary" to={`/preparacion-campo?inspectionId=${id}`}>
          <Icon name="clipboard" /> Abrir preparación
        </Link>
      </div>
    </article>}
    <InspectionVisitEditorF4Page />
  </>;
}