/* ─── Indicador de navegación (esquina superior derecha) ─── */

interface NavIndicatorProps {
  preguntaActual: number
  totalPreguntas: number
  onPrev?: () => void
  onNext?: () => void
  puedeAnterior: boolean
  puedeSiguiente: boolean
}

/* ─── Flecha izquierda ────────────────────────── */
function FlechaIzq({ disabled }: { disabled?: boolean }) {
  return (
    <svg viewBox="0 0 24 40" width="18" height="30" fill="none">
      <path
        d="M20 4 L6 20 L20 36"
        stroke={disabled ? '#cbd5e1' : '#DC2626'}
        strokeWidth="4"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  )
}

/* ─── Flecha derecha ──────────────────────────── */
function FlechaDer({ disabled }: { disabled?: boolean }) {
  return (
    <svg viewBox="0 0 24 40" width="18" height="30" fill="none">
      <path
        d="M4 4 L18 20 L4 36"
        stroke={disabled ? '#cbd5e1' : '#DC2626'}
        strokeWidth="4"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  )
}

export default function NavIndicator({
  preguntaActual,
  totalPreguntas,
  onPrev,
  onNext,
  puedeAnterior,
  puedeSiguiente,
}: NavIndicatorProps) {
  const counterText = totalPreguntas > 0
    ? `${preguntaActual}/${totalPreguntas}`
    : '0/0'

  return (
    <div
      className="absolute flex items-center gap-3 z-30"
      style={{ top: '20px', right: '40px' }}
    >
      {/* Flecha izquierda */}
      <button
        onClick={onPrev}
        disabled={!puedeAnterior}
        aria-label="Anterior"
        className="p-2 rounded-full transition-colors duration-200 cursor-pointer
          disabled:opacity-30 disabled:cursor-not-allowed
          hover:bg-gray-100 active:bg-gray-200"
      >
        <FlechaIzq disabled={!puedeAnterior} />
      </button>

      {/* Contador */}
      <span className="text-gray-700 font-bold text-2xl tabular-nums select-none min-w-[60px] text-center">
        {counterText}
      </span>

      {/* Flecha derecha */}
      <button
        onClick={onNext}
        disabled={!puedeSiguiente}
        aria-label="Siguiente"
        className="p-2 rounded-full transition-colors duration-200 cursor-pointer
          disabled:opacity-30 disabled:cursor-not-allowed
          hover:bg-gray-100 active:bg-gray-200"
      >
        <FlechaDer disabled={!puedeSiguiente} />
      </button>
    </div>
  )
}
